Teilen Sie die Implementierungsmethode für das JQuery-Lotterie-Applet (Code)

In diesem Artikel werden hauptsächlich die relevanten Informationen zum jquery-Lotterie-Applet vorgestellt. Detaillierte Ideen, Implementierungscode und Implementierungs-Renderings finden Sie hier

diese Überall kann man Nachrichten oder Berichte über WeChat-Miniprogramme sehen, und auch im Bloggarten schreiben viele Leute über WeChat-Miniprogramme. Aber worüber ich heute sprechen möchte, ist kein WeChat-Applet, sondern ein lustiges Lotterie-Applet, das mit einfacher JQuery geschrieben wurde. Abschließend habe ich einige Anweisungen für die nachfolgenden Updates des Lotterie-Applets und ein wenig Wissen über Math.random vorgestellt. (Das Endergebnis wird gespeichert unter: http://runjs.cn/detail/rq3bbhto, klicken Sie, um den Effekt anzuzeigen)

Sehen wir uns ein Beispiel eines einfachen Lotterie-Applets an:

HTML:

<p class="g-lottery-box">
  <p class="g-lottery-img">
    <a class="playbtn" href="javascript:;" title="开始抽奖"></a>
  </p>
</p>

CSS:

*{margin: 0; padding: 0;}
.g-lottery-box {
  width: 400px;
  height: 400px;
  margin-left: 30px;
  position: relative;
  background: url(images/0.gif) no-repeat;
  margin: 0 auto;
}
    
.g-lottery-box .g-lottery-img {
  width: 340px;
  height: 340px;
  position: relative;
  background: url(images/1.png) no-repeat;
  left: 30px;
  top: 30px;
}
      
.g-lottery-box #clik {
  width: 186px;
  height: 186px;
  position: absolute;
  top: 77px;
  left: 77px;
  background: url(images/2.png) no-repeat;
}

js:

/* 注意引用的顺序
 * <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>  
 * <script src="js/jquery.rotate.min.js" type="text/javascript" charset="utf-8"></script>
 * <script src="js/demo.js" type="text/javascript" charset="utf-8"></script>
 *
 * Creat By foodoir 2010-10-11
 *
 * */

var raNum;
//注意：要将raNum设置为全局变量，容易出错

$(function() {
  $(&#39;#clik&#39;).click(function() {
    //
    raNum = Math.random()*360;
    $(this).rotate({
      duration:3000,
      angle:0,
      animateTo:raNum+720+360,
      callback:function(){
        A();
      }
    });
  });
});

function A(){
  
  if(0 < raNum && raNum <= 30){
    alert("恭喜您抽到理财金2000元！");
    return;
  }else if(30 < raNum && raNum <= 90){
    alert("谢谢参与~再来一次吧~");
    return;
  }else if(90 < raNum && raNum <= 150){
    alert("恭喜您抽到理财金5200元！");
    return;
  }else if(150 < raNum && raNum <= 210){
    alert("恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!");
    return;
  }else if(210 < raNum && raNum <= 270){
    alert("谢谢参与~再来一次吧~");
    return;
  }else if(270 < raNum && raNum <= 330){
    alert("恭喜您抽到理财金1000元！");
    return;
  }else if(330 < raNum && raNum <= 360){
    alert("恭喜您抽到理财金2000元！");
    return;
  }
}

Einige Gedanken zu Miniprogrammen:

Denkpunkt 1: In der A()-Methode wird viel if...else verwendet, wodurch der Code nicht so schön aussieht. Gibt es eine Möglichkeit, den Code weniger schön aussehen zu lassen?

Lösung: Verwenden Sie die Methode Schalter

switch(data) {
  case 1:
    rotateFunc(1, 0, '恭喜您获得2000元理财金!');
    break;
  case 2:
    rotateFunc(2, 60, '谢谢参与~再来一次吧~');
    break;
  case 3:
    rotateFunc(3, 120, '恭喜您获得5200元理财金!');
    break;
  case 4:
    rotateFunc(4, 180, '恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!');
    break;
  case 5:
    rotateFunc(5, 240, '谢谢参与~再来一次吧~');
    break;
  case 6:
    rotateFunc(6, 300, '恭喜您获得1000元理财金!');
    break;
}

//后面还需要定义函数rotateFunc，在这里直接使用另外一种方法来完成
var rotateFunc = function(awards, angle, text) {
  isture = true;
  $btn.stopRotate();
  $btn.rotate({
    angle: 0,
    duration: 4000, //旋转时间
    animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
    callback: function() {
      isture = false; // 标志为 执行完毕
      alert(text);
    }
  });
};

Denken 2 : Der eigentliche große Plattenteller kann sich mehrmals drehen, aber der Effekt beträgt zu diesem Zeitpunkt weniger als eine Umdrehung. Was soll ich tun, wenn ich den Effekt mehrerer Umdrehungen sehen möchte?

Lösung: Auf animateTo:raNum folgt 360 multipliziert mit der Anzahl der Runden, die Sie machen möchten (nehmen Sie drei Ziehungen als Beispiel)

animateTo:raNum+360*3

Gedanke 3: Können wir die Anzahl der Ziehungen begrenzen?

Lösung: (Nehmen Sie drei Ziehungen als Beispiel)

$(function() {
  var i =0;
  $('#clik').click(function() {
    i++;
    if(i>3){
      alert("您的抽奖机会已经用完！");
    }
    //代码省略
  });
});

Denken Viertens: Nach der vorherigen Idee liegt die Wahrscheinlichkeit, in jeder Lotterie zu gewinnen, bei 1/3, aber in Wirklichkeit möchten wir nicht, dass Benutzer gewinnen. Was sollen wir tun?

Lösung: 1. Wir ändern raNum direkt (wenn wir nicht möchten, dass Benutzer E-Cards erhalten)

raNum = Math.random()*360;
if(150 < raNum && raNum <= 210){
  raNum += 60;
}

2. Wir ändern die Beurteilungsbedingungen

else if(150 < raNum && raNum <= 210){
    //再将概率减小到1%
    var n = Math.random()*100;
    if(n<1){
      alert("恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!");
    }else{
      raNum += 60;
    }
    return;
  }

Gedanke 5: Können wir Sie daran erinnern? der verbleibenden Anzahl an Ziehungen?

Lösung: Erstellen Sie eine neue Variable und zeigen Sie sie dann über die DOM-Methode an

<h3>欢迎来到foodoir抽奖小程序，您还有<span id="ii">3</span>次抽奖机会</h3>

h3{
  text-align: center;
  font-family: "微软雅黑", "microsoft yahei";
  line-height: 60px;
}
h3 span{
  font-size: 40px;
  line-height: 60px;
  font-family: elephant;
  display: inline-block;
  padding: 5px 20px;
  border: 2px solid red;
  border-radius: 10px;
  color: #f00;
  background-color: yellow;
}

var ii = 3-i;
if(ii>=0){
  $(&#39;#ii&#39;).html(ii);

}

Gedanke 6: Wenn wir das KouKou-Spiel spielen, sehen wir oft einen scrollenden Bildschirm, der uns fragt, wer gerade den Preis gewonnen hat.

Lösung: Dazu müssen wir die Daten im Hintergrund anpassen, aber wir können die Daten zuerst selbst festlegen und die Wirkung überprüfen. Wir können auch Datum

<p class="mar">
<marquee><span id="time"></span>恭喜foodoir抽到京东e卡！！！！</marquee>
</p>

var now =new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var t = hours+":"+minutes+":"+seconds;
$(&#39;#time&#39;).html(t);

Zu diesem Zeitpunkt ist die Wirkung unseres Miniprogramms so:

Mehr Nachdenken – „Wir können das Programm auch verbessern.“

1. Fügen Sie die Lotterieliste zur vorhandenen Seite hinzu, zeigen Sie die Benutzer an, die den Preis gewonnen haben, und den Zeitpunkt, zu dem sie den Preis gezogen haben, und lassen Sie sie automatisch aktualisieren (implementiert durch AJAX-Technologie)

2. Fügen Sie ein Login hinzu und Registrierungsfunktion, die Verlosung kann erst nach erfolgreicher Registrierung und Anmeldung durchgeführt werden
3. Für den ausgelosten Gewinn können wir den Link setzen und darauf klicken, um zur Oberfläche zu gelangen, über die der Gewinn genutzt werden kann
4. ...

Oder sagen wir das--》

1. Fügen Sie die Lotterieliste zur vorhandenen Seite hinzu und zeigen Sie die Benutzer an, die die Preise gezogen haben und der Zeitpunkt, zu dem sie die Preise gezogen haben, und kann automatisch aktualisiert werden

2. Nach der Ziehung des Preises können wir die Belohnung erhalten. Voraussetzung ist, dass alte Benutzer diese nach dem Einloggen erhalten können, während neue Benutzer sich vorher registrieren müssen Sie können es erhalten, und neue
Benutzer erhalten es dreimal nach der Registrierung Verlosungsmöglichkeiten. 　3. Nach dem Einloggen gelangen Sie in ein Punktezentrum. Es gibt mehrere Ranglisten (Vermögensrankings und Börsenrankings) sowie gleichwertige Ersatzprodukte, die eingelöst werden können
　4. ...

Über Mathe. random()

　　ECMAScript 规范是这样描述 Math.random() 的：“返回一个整数，该整数的取值范围大于等于 0 而小于 1，浏览器开发商使用自定义的算法或策略从该范围内实现均匀分布的随机或伪随机效果。”
　　显然，规范中遗漏了大量的细节。首先，它没有定义精度。由于 ECMAScript 使用 IEEE 754 双精度浮点数存储所有数值，所以理论上应该有 53 位的精确度，即随机数的随机范围是 [1/x^53, 2^53-1]，但实际上，V8 中的 Math.random() 只有 32 位精度，不过这已经足够我们用的了。
　　真正的问题是规范放任浏览器开发者自由实现该方法，且没有限制最小的周期长度，唯一对分布的要求也只是“近似均匀”。

关于8 PRNG（）

var MAX_RAND = Math.pow(2, 32);
var state = [seed(), seed()];
var mwc1616 = function mwc1616() {
  var r0 = (18030 * (state[0] & 0xFFFF)) + (state[0] >>> 16) | 0;
  var r1 = (36969 * (state[1] & 0xFFFF)) + (state[1] >>> 16) | 0;
  state = [r0, r1];
 
  var x = ((r0 << 16) + (r1 & 0xFFFF)) | 0;
  if (x < 0) {
    x = x + MAX_RAND;
  }
  return x / MAX_RAND;
}

　　上述代码就是 V8 PRNG 的核心逻辑。在老版本的 V8 源码中对此有一段注释：“随机数生成器使用了 George Marsaglia 的 MWC 算法。”根据这段注释，我从谷歌搜索到了以下信息：

George Marsaglia 是一个毕生致力于 PRNG 的数学家，他还开发了用于测试随机数生成质量的工具Diehard tests
MWC（multiply-with-carry）是由 Marsaglia 发明的 PRNG 算法，非常类似于 LCG（linear congruential generators，线性同余法），其优势在于生成的循环周期更长，接近于 CPU 的循环周期。

　　不过，V8 PRNG 与经典的 MWC 生成器并不相同，因为它不是对 MWC 生成器的简单扩展，而是组合使用了两个 MWC 子生成器（r0 和 r1），并最终拼接成一个随机数。这里略过相关的数学计算，只说结论，每个子生成器最长的循环周期长度都是 2^30，合并后为 2^60。

　　前面提到过，我们定义的标识符有 2^132 种可能性，所以 V8 的 Math.random() 并不能满足这一需求。尽管如此，我们仍使用该函数并假设生成的随机数是均匀分布的，那么生成一亿个标识符后出现碰撞的可能性才只有 0.4%，但现在发生碰撞的时间也太早了，所以我们的分析一定有什么地方出错了。之前已经证明循环周期长度是正确的，那么很有可能生成的随机数不是均匀分布的，一定有其他的结构影响了生成的序列。

       感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

Das obige ist der detaillierte Inhalt vonTeilen Sie die Implementierungsmethode für das JQuery-Lotterie-Applet (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!