Partager la méthode d'implémentation de l'applet de loterie jquery (code)-Développement de mini-programmes-php.cn

Cet article présente principalement les informations pertinentes de l'applet de loterie jquery Des idées détaillées, le code d'implémentation et les rendus d'implémentation sont fournis ici. Les amis dans le besoin peuvent s'y référer

Aujourd'hui, vous. peut voir des nouvelles ou des rapports sur les mini-programmes WeChat partout, et de nombreuses personnes écrivent également sur les mini-programmes WeChat dans le jardin des blogs. Mais ce dont je veux parler aujourd'hui n'est pas d'une applet WeChat, mais d'une applet de loterie amusante écrite avec un simple jquery. Enfin, j'ai présenté quelques instructions de mise à jour sur l'applet de loterie et quelques petites connaissances sur Math.random. (Le résultat final est enregistré sur : http://runjs.cn/detail/rq3bbhto, cliquez pour voir l'effet)

Regardons un exemple d'applet de loterie simple :

html :

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

Copier après la connexion

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;
}

Copier après la connexion

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;
  }
}

Copier après la connexion

Quelques réflexions sur les mini-programmes :

Réflexion 1 : Beaucoup de if...else sont utilisés dans la méthode A(), ce qui rend le code moins beau. Existe-t-il un moyen de rendre le code moins beau ?

Solution : Utilisez la méthode switch

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

Copier après la connexion

Pensée 2 : Le grand plateau tournant réel peut tourner plusieurs fois, mais l'effet à ce moment est inférieur à un tour. Que dois-je faire si je veux voir l'effet de plusieurs tours ?

Solution : animateTo:raNum est suivi de 360 multiplié par le nombre de tours que vous souhaitez effectuer (prenez trois tirages comme exemple)

animateTo:raNum 360*3

Réflexion 3 : Peut-on limiter le nombre de tirages ?

Solution : (Prenons trois tirages comme exemple)

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

Copier après la connexion

Réfléchir Quatre : selon l'idée précédente, il va de soi que la probabilité de gagner à chaque loterie est de 1/3, mais en réalité, nous ne voulons pas vraiment que les utilisateurs gagnent. Que devons-nous faire ?

Solution : 1. Nous changeons directement le raNum, (si nous ne voulons pas que les utilisateurs obtiennent des e-cartes)

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

Copier après la connexion

2. Nous modifions les conditions de jugement

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

Copier après la connexion

Réflexion 5 : Pouvons-nous vous rappeler See More du nombre restant de tirages utilisateur ?

Solution : Créer une nouvelle variable puis l'afficher via la méthode DOM

<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);

}

Copier après la connexion

Pensée 6 : Lorsque nous jouons au jeu KouKou, nous voyons souvent un écran déroulant indiquant qui vient de gagner le prix. Comment pouvons-nous y parvenir ?

Solution : Cela nous oblige à ajuster les données en arrière-plan, mais nous pouvons d'abord définir les données nous-mêmes et vérifier l'effet. Nous pouvons également utiliser Date<. 🎜 en Javascript >

<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);

Copier après la connexion

À ce stade, l'effet de notre mini programme est le suivant :

Partager la méthode dimplémentation de lapplet de loterie jquery (code)

Plus de réflexion--》Nous pouvons également améliorer le programme.

1. Ajoutez la liste de loterie à la page existante, affichez les utilisateurs qui ont gagné le prix et l'heure à laquelle ils ont tiré le prix, et pouvez actualiser automatiquement (implémenté par la technologie AJAX)

2. Ajouter une connexion et fonction d'inscription, la loterie ne peut être réalisée qu'après une inscription et une connexion réussies
3. Pour le prix tiré, nous pouvons définir le lien et cliquer dessus pour accéder à l'interface où le prix peut être utilisé
4. ...

Ou disons ceci--》

1. Ajouter la liste de loterie à la page existante, afficher les utilisateurs qui ont tiré les prix et l'heure à laquelle ils ont tiré les prix, et peuvent être automatiquement actualisés

2. Après avoir tiré le prix, nous pouvons recevoir la récompense. Le principe est que les anciens utilisateurs peuvent la recevoir après s'être connectés, tandis que les nouveaux utilisateurs doivent s'inscrire avant. ils peuvent le recevoir, et les nouveaux
utilisateurs le recevront trois fois après s'être inscrits Opportunités de tombola. 　3. Une fois connecté, vous entrerez dans un centre commercial de points. Il existe plusieurs classements (classements de richesse et classements d'échange) ainsi que des substituts équivalents qui peuvent être échangés
　4. ...

À propos des mathématiques. 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;
}

Copier après la connexion

　　上述代码就是 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%，但现在发生碰撞的时间也太早了，所以我们的分析一定有什么地方出错了。之前已经证明循环周期长度是正确的，那么很有可能生成的随机数不是均匀分布的，一定有其他的结构影响了生成的序列。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!