Share jquery lottery applet implementation method (code)

This article mainly introduces the relevant information of jquery Lottery applet. Detailed ideas, implementation code and implementation renderings are provided here. Friends in need can refer to

Today, you can see news or reports about WeChat mini programs everywhere, and there are also many people writing about WeChat mini programs in the blog garden. But what I want to talk about today is not a WeChat applet, but a fun lottery applet written with simple jquery. Finally, I introduced some future update directions about the lottery applet and some little knowledge about Math.random. (The final result is saved at: http://runjs.cn/detail/rq3bbhto, click to view the effect)

Let’s look at an example of a simple lottery applet:

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

Some thoughts about small programs:

Thinking 1: In A There are a lot of if...else used in the () method, which makes the code not look so beautiful. Is there any way to make the code look less beautiful?

Solution: Use switchmethod

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

Thinking 2: Actual The large turntable in can rotate several times, but the effect at this time is less than one turn. What should I do if I want to see the effect of several turns?

Solution idea: animateTo:raNum is followed by 360 multiplied by the number of turns you want to make, (taking three draws as an example)

animateTo:raNum+360*3

Thinking 3: Can we limit the number of draws?

Solution: (Take three draws as an example)

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

Thinking 4: According to the previous idea, it stands to reason that the probability of winning in each lottery is 1/3, but in reality we don’t really want users to win. What should we do?

Solution: 1. We change raNum directly, (if we don’t want users to get e-cards)

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

2. Let’s modify the judgment conditions

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

Thinking 5: Can we remind users about the remaining number of draws?

Solution: Create a new variable and then display it through the DOM method

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

}

##Thinking Six: When we play the KouKou game, we often see a scrolling screen prompting who just won the prize. How can we achieve this?

Solution: This requires us to adjust the data in the background, but we can set the data ourselves first and check the effect. We can also use

Date## in 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);

At this point, the effect of our mini program is like this:

More thoughts- -》We can also improve the program.

　1. Add the lottery list to the existing page, display the users who drew the prizes and the time when they drew the prizes, and be able to refresh automatically (implemented by AJAX technology)

　2. Add login and registration Function, the lottery can only be carried out after successful registration and login

　3. For the drawn prize, we can set the link and click it to go to the interface where the prize can be used
　4.......

Or let’s say this -》

　1. Add the lottery list to the existing page, display the users who have drawn the prizes and the time when they have drawn the prizes, and Able to automatically refresh

2. After drawing the prize, we can receive the reward. The premise is that old users can receive it after logging in, while new users need to register before they can receive it, and new

users will receive it three times after registering. Raffle opportunities.
　3. After logging in, you will enter a points mall. There are several rankings (wealth rankings and exchange rankings) as well as equivalent substitutes that can be redeemed　4.…
About Math. 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%，但现在发生碰撞的时间也太早了，所以我们的分析一定有什么地方出错了。之前已经证明循环周期长度是正确的，那么很有可能生成的随机数不是均匀分布的，一定有其他的结构影响了生成的序列。

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

The above is the detailed content of Share jquery lottery applet implementation method (code). For more information, please follow other related articles on the PHP Chinese website!