用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: 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() {
$('#clik').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;
}
}

关于小程序的一些思考:

思考一:在A()方法中用了很多if…else,让代码看上去不是那么的优美,有没有什么办法可以让代码看上去又没一点?

解决思路:用switch方法

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

思考二:实际中的大转盘可以转好几圈,而此时的效果转了不到一圈,我想要看到转几圈的效果怎么办?

解决思路:animateTo:raNum在这后面加上360乘以想要转的圈数的结果,(以抽奖三次为例)

animateTo:raNum+360*3

思考三:我们可不可以对抽奖次数进行限制?

解决思路:(以抽奖三次为例)

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

思考四:按照前面的思路,按理说每次抽奖能中的概率为1/3,但是我们在实际中并不是那么的想让用户抽中,我们该怎么办?

解决思路:1、我们直接改变raNum,(假如不想让用户获得e卡)

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

2、我们修改判断条件

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

思考五:对于抽奖剩余次数,我们可不可以提醒用户?

解决思路:创建一个新的变量,然后通过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){
$('#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(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%,但现在发生碰撞的时间也太早了,所以我们的分析一定有什么地方出错了。之前已经证明循环周期长度是正确的,那么很有可能生成的随机数不是均匀分布的,一定有其他的结构影响了生成的序列。

后面的话:

  现在还有很多东西都还处于理论阶段,实际操作还没跟上。(后面有能力了会更新的),欢迎大家一起讨论。

jquery实现抽奖的更多相关文章

  1. 用jquery实现抽奖小程序

    用jquery实现抽奖小程序 这些日子,到处都可以看到关于微信小程序的新闻或报到,在博客园中写关于微信小程序的也不少.但是今天我要说的不是微信小程序,而是用简单的jquery写的一个好玩的抽奖小程序. ...

  2. jquery实现抽奖转盘

    用jquery通过配置参数实现抽奖转盘 1.html代码 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  3. jquery转盘抽奖的研究

    先看效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  4. jquery实现抽奖小游戏

    在很多网站或游戏活动中我们都会看到有关抽奖的活动或界面: 下面我将给大家介绍下如何通过javascript来实现这样的一个抽奖功能,主要从下面三个步骤入手(文中着重介绍第三部分有关功能的实现): 1. ...

  5. 使用jquery完成抽奖图片滚动的效果

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...

  6. jQuery九宫格抽奖

    <div id="box"> <div class="content content-1">1</div> <div ...

  7. jQuery圆盘抽奖

    在线演示 本地下载

  8. jquery实现简单抽奖功能

    一直纠结要怎么用jquery实现抽奖功能,看别人很多都是用flash制作的,找了很多资料,最终找到一个比较适合需求的,我做了些许调整,以下是代码展示(复制下来可以直接使用). 先上图:

  9. 利用java实现抽奖转盘(着重安全控制)

    本文是针对jquery 实现抽奖转盘作者的一个补充(主要用java去实现转盘结果生成及存储,解决jquery 做法 非法用户采用模拟器实现改变转盘值的风险性),针对jQuery的具体实现,请看案例:h ...

随机推荐

  1. SecureCRT 中 python 命令行使用退格键(backspace)出现 ^H 解决办法

    选项-->会话选项-->映射键 勾选"其他映射"中的两个选择框

  2. HDU2001java

    import java.util.*;import java.text.DecimalFormat;class Main{public static void main(String args[]){ ...

  3. [Form Builder]Form中的validate验证事件

    转:http://yedward.net/?id=70 Form的validate行为可以由一个总的form级别的validation属性来控制,可以通过set_form_property来设置成PR ...

  4. Linux Bash终端支持中文显示

    方法:修改系统变量LANG 即时生效: LANG=en_US.UTF- 永久生效: 修改.bashrc,加入 fi

  5. maven项目在tomcat中运行遇到的问题

    在使用maven构建项目,并在tomcat容器中运行的时候遇到了一些问题,现做一下记录 maven项目中jdk版本会自动恢复 maven项目的编译jdk即使在window -> java -&g ...

  6. 发布GeoServer后预览提示下载wms文件

    这是因为发布的图层有中文所导致的,只需修改tomcat的server.xml文件 <Connector port="8080" protocol="HTTP/1.1 ...

  7. 读取group by 之外的字段

    序号 姓名 性别 身高 1 张三 男  185 2 李四 女  161 3 王五 女  166 4 赵六 男  178 1.获取男生女生人数 select count(性别) , 性别 from 表名 ...

  8. .Net之美读书系列(一):委托与事件

    开启新的读书之旅,这次读的书为<.Net之美:.Net关键技术深入解析>. 我是选择性阅读的,把一些自己觉得容易忘记的,或者比较重要的知识点记录下来,以便以后能方便呢查阅. 尊重书本原作者 ...

  9. sdk 提示至少需要Build-tools 19.1.0以上的解决方式

    网上搜了很多办法,例如修改host文件或者设置sdk manager tool 为force方式都解决不了,最简单的方式是手动下载build-tools下的包,例如直接百度搜索build-tools ...

  10. Jstl标签库/Filter过滤器

    JSTLJSP Standard Tag Library JSP标准标签库 是Sun公司定义的一套标准,由Apache组织基于这套标准开发的一套标准库之后又转给Sun公司被称为JSTL,成为了java ...