jquery彩票小程序实现代码

用jquery实现彩票小程序

这几天到处都能看到关于微信小程序的新闻或者报道，博客公园里写的关于微信小程序的也不少。但我今天要讲的不是微信小程序，而是用简单jquery编写的趣味抽奖小程序。最后介绍了彩票小程序的一些更新方向和Math.random的一些小知识(最终结果保存在：http://runjs.cn/detail/rq3bbhto,点击查看效果)

让我们首先看一个简单的彩票小程序的例子：

html:

div class=' g-乐透-box ' div class=' g-乐透-img ' a class=' play TN ' href=' JavaScript :'Title='开始抽奖'/a /div/div css:

* { margin : 0；padd : 0；}.g-彩票箱{ width: 400px高度： 400 px；左边距left: 30px相对位置：background : URL(images/0 . gif)不重复；margin: 0 auto} .彩票盒。g-彩票-img { width : 340 px；height: 340px相对位置：background : URL(images/1 . png)不重复；left: 30pxtop: 30px} .g-彩票盒# clik { width: 186px高度： 186 px；绝对位置：top: 77pxleft: 77pxbackground : URL(images/2 . png)不重复；}js:

/*注意引用的顺序* script src=' http : js/jquery-2 . 1 . 1 . min . js ' type=' text/JavaScript ' charset=' utf-8 '/script * script src=' http 3360 js/jquery . rotate . min . js ' type=' text/JavaScript ' charset=' utf-8 '/script * script src=' http 3360 js/demo . js ' type='//注意：将raNum设置为全局变量，容易出错$ (function () {$ ('# clik ')。单击(function(){//RANUM=math . random()* 360；$(这个)。rotate({ duration:3000，angle:0，animateTo:raNum 720 360，callback : function(){ A()；} });});});函数a () {if (0 ranum ranum=30) {alert('恭喜您提取2000元理财！');返回；}else if(30 raNum raNum=90){ alert('感谢参与~再试一次~ ')；返回；} else if(90 ranum ranum=150){ alert('恭喜您提取5200元理财！');返回；} else if(150 ranum ranum=210){ alert('恭喜您获得100元JD.COM电子卡，第二天会以短信形式发送到您的手机，请查收！');返回；} else if(210 ranum ranum=270){ alert('感谢参与~再试一次~ ')；返回；} else if(270 ranum ranum=330){ alert('恭喜您节省了1000元的财务费用！');返回；} else if(330 ranum ranum=360){ alert('恭喜您提取2000元理财！');返回；关于小程序的一些想法：

思考1: A()方法中使用了大量的if…else，这使得代码看起来不那么漂亮。有什么方法可以让代码看起来不那么漂亮？

解决方案：使用切换方法

switch(data){ case 1: rotate func(1，0，'恭喜拿到2000元！');打破；案例2: rotateFunc(2，60，'感谢参与~再试一次~ ')；打破；案例3: rotateFunc(3，120，'恭喜您获得5200元人民币！');打破；案例4: rotateFunc(4，180，'恭喜您获得100元JD.COM电子卡，第二天会通过短信发送到您的手机，请注意查看！');打破；案例5: rotateFunc(5，240，'感谢参与~再试一次~ ')；打破；案例6: rotateFunc(6，300，'恭喜拿到1000元理财资金！');打破；}//函数rotateFunc需要稍后定义。这里直接用另一种方法完成var Rotatefunc=函数(奖励、角度、文字){ isture=true$ BTN . stop rotate()；$ btn。rotate ({angle: 0，duration 3360 4000，//rotation time animate : angle 1440，//让它根据得到的结果旋转回调函数3360(){ isture=false；//执行后标志为alert(文本)；} });};思路二：实践中大转盘可以转几次，但此时的效果转不到一次。想看几次翻身的效果怎么办？

解决方法：animateTo:raNum在此之后加上你想转的圈数的360倍(以抽奖三次为例)

animateTo:raNum 360 * 3

思考三：我们可以限制抽奖的次数吗？

解决方法：(以三次抽奖为例)

$(function(){ var I=0；$('#clik ')。单击(function(){ I；If(i3){ alert('您的抽奖机会已用尽！');}//代码省略})；});思路四：按照之前的思路，每张彩票中奖的概率是1/3是合情合理的，但是我们并不是真的希望用户中奖。我们做什么呢

解决方法：1。我们直接换raNum(如果不想让用户拿到E卡)

raNum=math . random()* 360；if(150 raNum raNum=210){ raNum=60；} 2.我们修改了判断条件

否则if(150 raNum raNum=210){ //将概率降低到1% var n=math . random()* 100；如果(n1){ alert('恭喜您获得100元JD.COM电子卡，第二天会通过短信发送到您的手机，请检查一下！');} else { raNum=60}返回；}思考5:我们能否提醒用户剩余的抽奖次数？

解决方案：创建一个新的变量，并通过DOM方法显示它

H3欢迎来到foodoir彩票小程序，您还有span id='ii'3/span彩票机会/H3 H3 { text-align : center；Font-family: '微软雅黑'，'微软雅黑'；线高： 60px；} H3 span { font-size : 40px；线高： 60px；font-family:大象；display:内联块；padding: 5px 20pxborder: 2px纯红；border-radius : 10px；color: # f00背景-颜色：黄色；} var ii=3-I；if(ii=0){ $('#ii ')。html(二)；}思考6:我们玩扣扣游戏的时候，经常会看到滚动屏幕提示谁刚中奖。我们如何实现它？

解决方案：这需要我们在后台调整数据，但是我们可以自己设置数据，先检查效果，也可以使用Javascript中的Date

祝贺foodoir绘制JD.COM电子卡！/marquee/div var now=new Date()；var hours=now . gethours()；var minutes=now . getminutes()；var seconds=now . getseconds()；var t=小时' : '分钟' : '秒；$('#time ')。html(t)；这里，我们的小程序的效果是这样的：

点击链接查看效果：http://runjs.cn/detail/rq3bbhto

更多思考——“我们也可以改进变更程序。

1.在已有页面中添加抽奖列表，会显示中奖用户及中奖时间，并可自动刷新(通过AJAX技术实现)。2.添加登录和注册功能，只有注册和登录成功后才能进行抽奖。3.对于抽取的奖品，我们可以在点击其链接后设置可用于奖品的界面。四.

或者我们是这样的——”

1.在已有页面添加抽奖列表，会显示中奖用户及中奖时间，并可自动刷新。2.中奖后我们就可以拿奖了，前提是老用户登录后可以拿，但是新用户需要注册才能拿，新用户注册后会有三次抽奖机会。3.登录完成后，进入积分商城。有几种排名(财富榜和交换榜)和等价的替代品可以交换。四.

更多关于数学的小知识

关于数学。随机()

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=函数mwc1616() { var r0=(18030 *(状态[0]0xFFFF))(状态[0]16)| 0；var r1=(36969 *(状态[1]0xfffff))(状态[1]16)| 0；state=[r0，R1]；var x=((r0 16)(R10xfffff))| 0；if(x ^ 0){ x=x MAX _ RAND；}返回x/MAX _ RAND；}以上代码是V8 PRNG的核心逻辑。旧的V8源代码中有一个注释：“随机数生成器使用乔治马萨利亚的MWC算法。”根据这个笔记，我从谷歌上搜索了以下信息：

乔治马萨利亚是一位毕生致力于PRNG的数学家。他还开发了一个测试随机数生成质量的工具。顽固测试mwc(多带进位)是Marsaglia发明的PRNG算法，与LCG(线性同余生成器)非常相似。其优点是生成的周期更长，接近CPU的周期。

然而，V8 PRNG不同于经典的MWC发电机，因为它不是MWC发电机的简单扩展，而是两个MWC子发电机(r0和r1)的组合，最终拼接成一个随机数。这里跳过相关的数学计算，只做结论。每个子发电机的最长周期长度为2 30，合并后为2 60。

如前所述，我们定义的标识符有2 132种可能性，因此V8的Math.random()无法满足这一要求。尽管如此，我们还是用这个函数，假设生成的随机数是均匀分布的，那么生成1亿个标识符后碰撞的概率只有0.4%，但是现在碰撞的时间太早了，所以我们的分析肯定有问题。之前已经证明循环长度是正确的，所以很有可能生成的随机数不是均匀分布的，一定有其他结构影响生成的序列。

感谢您的阅读，希望对大家有所帮助，感谢您对本网站的支持！