用jquery实现抽奖小程序
用jquery实现抽奖小程序
这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少。但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序。最后介绍了后面关于抽奖小程序的一些后面更新的方向和Math.random的一些小知识。(最终结果保存在:http://runjs.cn/detail/rq3bbhto,点击可查看效果)
下面先看一个简单的抽奖小程序的例子:
html:
<div class="g-lottery-box">
<div class="g-lottery-img">
<a class="playbtn" href="javascript:;" title="开始抽奖"></a>
</div>
</div>
css:
*{margin: ; padding: ;}
.g-lottery-box {
width: 400px;
height: 400px;
margin-left: 30px;
position: relative;
background: url(images/.gif) no-repeat;
margin: auto;
} .g-lottery-box .g-lottery-img {
width: 340px;
height: 340px;
position: relative;
background: url(images/.png) no-repeat;
left: 30px;
top: 30px;
} .g-lottery-box #clik {
width: 186px;
height: 186px;
position: absolute;
top: 77px;
left: 77px;
background: url(images/.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() {
$('#clik').click(function() {
//
raNum = Math.random()*;
$(this).rotate({
duration:,
angle:,
animateTo:raNum++,
callback:function(){
A();
}
});
});
}); function A(){ if( < raNum && raNum <= ){
alert("恭喜您抽到理财金2000元!");
return;
}else if( < raNum && raNum <= ){
alert("谢谢参与~再来一次吧~");
return;
}else if( < raNum && raNum <= ){
alert("恭喜您抽到理财金5200元!");
return;
}else if( < raNum && raNum <= ){
alert("恭喜您获得100元京东E卡,将在次日以短信形式下发到您的手机上,请注意查收!");
return;
}else if( < raNum && raNum <= ){
alert("谢谢参与~再来一次吧~");
return;
}else if( < raNum && raNum <= ){
alert("恭喜您抽到理财金1000元!");
return;
}else if( < raNum && raNum <= ){
alert("恭喜您抽到理财金2000元!");
return;
}
}
关于小程序的一些思考:
思考一:在A()方法中用了很多if…else,让代码看上去不是那么的优美,有没有什么办法可以让代码看上去又没一点?
解决思路:用switch方法
switch(data) {
case :
rotateFunc(, , '恭喜您获得2000元理财金!');
break;
case :
rotateFunc(, , '谢谢参与~再来一次吧~');
break;
case :
rotateFunc(, , '恭喜您获得5200元理财金!');
break;
case :
rotateFunc(, , '恭喜您获得100元京东E卡,将在次日以短信形式下发到您的手机上,请注意查收!');
break;
case :
rotateFunc(, , '谢谢参与~再来一次吧~');
break;
case :
rotateFunc(, , '恭喜您获得1000元理财金!');
break;
} //后面还需要定义函数rotateFunc,在这里直接使用另外一种方法来完成
var rotateFunc = function(awards, angle, text) {
isture = true;
$btn.stopRotate();
$btn.rotate({
angle: ,
duration: , //旋转时间
animateTo: angle + , //让它根据得出来的结果加上1440度旋转
callback: function() {
isture = false; // 标志为 执行完毕
alert(text);
}
});
};
思考二:实际中的大转盘可以转好几圈,而此时的效果转了不到一圈,我想要看到转几圈的效果怎么办?
解决思路:animateTo:raNum在这后面加上360乘以想要转的圈数的结果,(以抽奖三次为例)
animateTo:raNum+*
思考三:我们可不可以对抽奖次数进行限制?
解决思路:(以抽奖三次为例)
$(function() {
var i =;
$('#clik').click(function() {
i++;
if(i>){
alert("您的抽奖机会已经用完!");
}
//代码省略
});
});
思考四:按照前面的思路,按理说每次抽奖能中的概率为1/3,但是我们在实际中并不是那么的想让用户抽中,我们该怎么办?
解决思路:1、我们直接改变raNum,(假如不想让用户获得e卡)
raNum = Math.random()*;
if( < raNum && raNum <= ){
raNum += ;
}
2、我们修改判断条件
else if( < raNum && raNum <= ){
//再将概率减小到1%
var n = Math.random()*;
if(n<){
alert("恭喜您获得100元京东E卡,将在次日以短信形式下发到您的手机上,请注意查收!");
}else{
raNum += ;
}
return;
}
思考五:对于抽奖剩余次数,我们可不可以提醒用户?
解决思路:创建一个新的变量,然后通过DOM方法显示出来
<h3>欢迎来到foodoir抽奖小程序,您还有<span id="ii"></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 = -i;
if(ii>=){
$('#ii').html(ii); }
思考六:在我们玩扣扣游戏时,经常会看到有滚动屏提示刚刚有谁谁抽到了奖,我们该如何实现?
解决思路:这个需要我们在后台调数据,但是我们可以先自己设置数据并查看效果,我们还可以用Javascript中的Date
<div class="mar">
<marquee><span id="time"></span>恭喜foodoir抽到京东e卡!!!!</marquee>
</div> var now =new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var t = hours+":"+minutes+":"+seconds;
$('#time').html(t);
到这里,我们的小程序的效果就成这样了:
点击链接查看效果:http://runjs.cn/detail/rq3bbhto
更多思考--》我们还可以将改程序更完善。
1、在现有页面中增加抽奖榜,将抽到奖的用户和抽到奖的时间显示出来,并且能够自动刷新(AJAX技术实现)
2、增加登录和注册功能,注册成功并登录后方可进行抽奖活动
3、对于抽到的奖,我们可以设置其链接点击后可以进行到该奖可以使用的界面
4、……
或者说我们这样--》
1、在现有页面中增加抽奖榜,将抽到奖的用户和抽到奖的时间显示出来,并且能够自动刷新
2、抽到奖后,我们可以领取奖励,前提是老用户登陆后可以领取,而新用户需要注册后才能领取,并且新用户注册后还送三次抽奖机会。
3、登录完成后进入一个积分商城,有几个排行榜(财富榜和兑换榜)还有可以兑换的等价替换物
4、……
更多关于Math.random的小知识
关于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(, );
var state = [seed(), seed()];
var mwc1616 = function mwc1616() {
var r0 = ( * (state[] & 0xFFFF)) + (state[] >>> ) | ;
var r1 = ( * (state[] & 0xFFFF)) + (state[] >>> ) | ;
state = [r0, r1]; var x = ((r0 << ) + (r1 & 0xFFFF)) | ;
if (x < ) {
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%,但现在发生碰撞的时间也太早了,所以我们的分析一定有什么地方出错了。之前已经证明循环周期长度是正确的,那么很有可能生成的随机数不是均匀分布的,一定有其他的结构影响了生成的序列。
后面的话:
现在还有很多东西都还处于理论阶段,实际操作还没跟上。(后面有能力了会更新的),欢迎大家一起讨论。
用jquery实现抽奖小程序的更多相关文章
- 用 python 写一个年会抽奖小程序
使用 pyinstaller 打包工具常用参数指南 pyinstaller -F demo.py 参数 含义 -F 指定打包后只生成一个exe格式的文件 -D –onedir 创建一个目录,包含exe ...
- 抽奖小程序,js,canvas
js写的网页抽奖小程序,先上截图 源码地址:https://github.com/xiachaoxulu/raffle
- Winform 随机抽奖小程序
效果图: 主要代码: Form1.cs using System; using System.Drawing; using System.IO; using System.Runtime.Intero ...
- Excel VBA活动抽奖小程序
在活动中,我们常会有抽奖,抽奖箱准备繁琐,现在多采用线上抽奖方式,下面用Excel VBA写了一个简单的抽奖小程序 简单测试效果如下,可实现: 多次抽奖,且每次抽奖都不重复 抽奖界面滚动人员信息,点击 ...
- Java抽奖小程序
package com.test; import java.awt.Color; import java.awt.Font; import java.awt.event.ActionEvent; im ...
- jquery实现抽奖小游戏
在很多网站或游戏活动中我们都会看到有关抽奖的活动或界面: 下面我将给大家介绍下如何通过javascript来实现这样的一个抽奖功能,主要从下面三个步骤入手(文中着重介绍第三部分有关功能的实现): 1. ...
- c#自制抽奖小程序
#region 第一部分界面设计 ; Button button = new Button(); Image[] images = new Image[N]; PictureBox[] picture ...
- python——公司年会抽奖小程序
张三科技有限公司有300名员工,开年会抽奖,奖项如下一等奖3名 : 泰国五日游二等奖6名 :iphone手机三等奖30名 :避孕套一盒规则:1.一共抽3次,第一次抽3等奖,第二次抽2等奖,第三次压轴抽 ...
- 基于vs2012的C# winform抽奖小程序的总结
哈希表的使用 Hashtable hashtable = new Hashtable(); hashtable.ContainsValue(tmp);//判断哈希表中有没有tmp hashtable. ...
随机推荐
- 第一章-第十四题(Hello world程序)
题目:请找一个同学结对 (参看本书结对编程的内容),两人共同工作 (不能分开干活),从上面的列表中选取两个平台,在每个平台上,写一个最简单的 "Hello World" 类型的程序 ...
- ASP.Net请求处理机制初步探索之旅 - Part 5 ASP.Net MVC请求处理流程
好听的歌 我一直觉得看一篇文章再听一首好听的歌,真是种享受.于是,我在这里嵌入一首好听的歌,当然你觉得不想听的话可以点击停止,歌曲 from 王菲 <梦中人>: --> 开篇:上一篇 ...
- Web3DGame之路(三)分析babylonjs
BabylonJS的例子十分详实 http://doc.babylonjs.com/tutorials Babylonjs的学习比较顺畅,开始做一些深入分析 一.语言选择 首先是js还是ts的问题 ...
- kpvalidate开辟验证组件,通用Java Web请求服务器端数据验证组件
小菜利用工作之余编写了一款Java小插件,主要是用来验证Web请求的数据,是在服务器端进行验证,不是简单的浏览器端验证. 小菜编写的仅仅是一款非常初级的组件而已,但小菜为它写了详细的说明文档. 简单介 ...
- xamarin UWP中MessageDialog与ContentDialog的区别
MessageDialog与ContentDialog的异同点解析: 相同点一:都是uwp应用上的一个弹窗控件.都能做为弹出应用. 相异点一:所在命名空间不同,MessageDialog在Window ...
- 每天一个linux命令(25):linux文件属性详解
Linux 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: 命令: ls -lih 输出: [root@loca ...
- Solr的原理及在项目中的使用实例.
前面已经讲过 如果安装及配置Solr服务器了, 那么现在我们就来正式在代码中使用Solr.1,这里Solr主要是怎么使用的呢? 当我们在前台页面搜索商品名称关键词时, 我们这时是在Solr库中去查找 ...
- 《C#高级编程》学习总结之LINQ
一.标准的查询操作符 标准查询操作符 说明 Where OfType<TResult> 筛选操作符定义了返回元素的条件. Select SelectMany 投射操作符用于把对象转换为另一 ...
- SSISDB6:Operation
SSISDB使用Operation表示对SSIS Project所做的任何操作,在执行一次Operation时,SSISDB会记录Operation的Message,当触发Event时,会记录Even ...
- 利用扩展事件进行调优和Troubleshooting PPT分享
本篇主题是我在2015年中国数据库大会(DTCC)上的分享,扩展事件从2008版本出来到现在已经有6-7年,国内却很少有相关资料和使用,现在分享一下PPT,希望对大家有所帮助. 可 ...