需求:最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路)。效果如下:一、页面结构: 1 <div class="g-content"> 2 <div class="g-lo ...
需求:
最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路)。
效果如下:
一、页面结构:
1 <div class="g-content"> 2 <div class="g-lottery-case"> 3 <div class="g-left"> 4 <h2>您已拥有<span class="playnum"></span>次抽奖机会,点击立刻抽奖!~</h2> 5 <div class="g-lottery-box"> 6 <div class="g-lottery-img"> 7 </div> 8 <a class="playbtn" href="javascript:;" title="开始抽奖"></a> 9 </div>10 </div>11 </div>12 </div>
标签h2为提示内容,.playnum是剩余抽奖次数,.g-lottery-img是最外层的闪灯,.g-lottery-img是转动的内容,.playbtn是点击抽奖按钮。
这里用的是jquery.rotate.js,所以要引入jquery然后引入jquery.rotate.js,百度一下很简单的,没几个AIP。
二、简单的样式:
1 <style> 2 .g-content { 3 width: 100%; 4 background: #fbe3cc; 5 height: auto; 6 font-family: "微软雅黑", "microsoft yahei"; 7 } 8 .g-content .g-lottery-case { 9 width: 500px;10 margin: 0 auto;11 overflow: hidden;12 }13 .g-content .g-lottery-case .g-left h2 {14 font-size: 20px;15 line-height: 32px;16 font-weight: normal;17 margin-left: 20px;18 }19 20 .g-content .g-lottery-case .g-left {21 width: 450px;22 float: left;23 }24 .g-lottery-box {25 width: 400px;26 height: 400px;27 margin-left: 30px;28 position: relative;29 background: url(ly-plate-c.gif) no-repeat;30 }31 .g-lottery-box .g-lottery-img {32 width: 340px;33 height: 340px;34 position: relative;35 background: url(bg-lottery.png) no-repeat;36 left: 30px;37 top: 30px;38 }39 .g-lottery-box .playbtn {40 width: 186px;41 height: 186px;42 position: absolute;43 top: 50%;44 left: 50%;45 margin-left: -94px;46 margin-top: -94px;47 background: url(playbtn.png) no-repeat;48 }49 </style>
样式就定一下高度,居中一下,显示一下背景图片
三、JS代码:
1 <script> 2 $(function() { 3 var $btn = $('.g-lottery-img');// 旋转的div 4 var playnum = 5; //初始次数,由后台传入 5 $('.playnum').html(playnum);//显示还剩下多少次抽奖机会 6 var isture = 0;//是否正在抽奖 7 var clickfunc = function() { 8 var data = [1, 2, 3, 4, 5, 6];//抽奖 9 //data为随机出来的结果,根据概率后的结果10 data = data[Math.floor(Math.random() * data.length)];//1~6的随机数11 switch(data) {12 case 1:13 rotateFunc(1, 0, '恭喜您获得2000元理财金');14 break;15 case 2:16 rotateFunc(2, 0, '恭喜您获得2000元理财金2');17 break;18 case 3:19 rotateFunc(3, 0, '恭喜您获得2000元理财金3');20 break;21 case 4:22 rotateFunc(4, -60, '谢谢参与4');23 break;24 case 5:25 rotateFunc(5, 120, '谢谢参与5');26 break;27 case 6:28 rotateFunc(6, 120, '谢谢参与6');29 break;30 }31 }32 $(".playbtn").click(function() {33 if(isture) return; // 如果在执行就退出34 isture = true; // 标志为 在执行35 if(playnum <= 0) { //当抽奖次数为0的时候执行36 alert("没有次数了");37 $('.playnum').html(0);//次数显示为038 isture = false;39 } else { //还有次数就执行40 playnum = playnum - 1; //执行转盘了则次数减141 if(playnum <= 0) {42 playnum = 0;43 }44 $('.playnum').html(playnum);45 clickfunc();46 }47 });48 var rotateFunc = function(awards, angle, text) {49 isture = true;50 $btn.stopRotate();51 $btn.rotate({52 angle: 0,//旋转的角度数53 duration: 4000, //旋转时间54 animateTo: angle + 1440, //给定的角度,让它根据得出来的结果加上1440度旋转55 callback: function() {56 isture = false; // 标志为 执行完毕57 alert(text);58 }59 });60 };61 62 });63 </script>
说到底就是用一个1~6的随机数,然后把对应的角度值传给jquery.rotate.js,它就会转到相应的地方,最后做一下对应剩余次数的判断和修改。
最后所有代码为:
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>抽奖</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> <style> .g-content { width: 100%; background: #fbe3cc; height: auto; font-family: "微软雅黑", "microsoft yahei"; } .g-content .g-lottery-case { width: 500px; margin: 0 auto; overflow: hidden; } .g-content .g-lottery-case .g-left h2 { font-size: 20px; line-height: 32px; font-weight: normal; margin-left: 20px; } .g-content .g-lottery-case .g-left { width: 450px; float: left; } .g-lottery-box { width: 400px; height: 400px; margin-left: 30px; position: relative; background: url(ly-plate-c.gif) no-repeat; } .g-lottery-box .g-lottery-img { width: 340px; height: 340px; position: relative; background: url(bg-lottery.png) no-repeat; left: 30px; top: 30px; } .g-lottery-box .playbtn { width: 186px; height: 186px; position: absolute; top: 50%; left: 50%; margin-left: -94px; margin-top: -94px; background: url(playbtn.png) no-repeat; } </style></head><body><div > <div > <div > <h2>您已拥有<span ></span>次抽奖机会,点击立刻抽奖!~</h2> <div > <div > </div> <a href="javascript:;" title="开始抽奖"></a> </div> </div> </div></div><script src='/images/loading.gif' data-original="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="jsmin/jquery.rotate.min.js"></script><script>$(function() { var $btn = $('.g-lottery-img');// 旋转的div var playnum = 5; //初始次数,由后台传入 $('.playnum').html(playnum);//显示还剩下多少次抽奖机会 var isture = 0;//是否正在抽奖 var clickfunc = function() { var data = [1, 2, 3, 4, 5, 6];//抽奖 //data为随机出来的结果,根据概率后的结果 data = data[Math.floor(Math.random() * data.length)];//1~6的随机数 switch(data) { case 1: rotateFunc(1, 0, '恭喜您获得2000元理财金'); break; case 2: rotateFunc(2, 0, '恭喜您获得2000元理财金2'); break; case 3: rotateFunc(3, 0, '恭喜您获得2000元理财金3'); break; case 4: rotateFunc(4, -60, '谢谢参与4'); break; case 5: rotateFunc(5, 120, '谢谢参与5'); break; case 6: rotateFunc(6, 120, '谢谢参与6'); break; } } $(".playbtn").click(function() { if(isture) return; // 如果在执行就退出 isture = true; // 标志为 在执行 if(playnum <= 0) { //当抽奖次数为0的时候执行 alert("没有次数了"); $('.playnum').html(0);//次数显示为0 isture = false; } else { //还有次数就执行 playnum = playnum - 1; //执行转盘了则次数减1 if(playnum <= 0) { playnum = 0; } $('.playnum').html(playnum); clickfunc(); } }); 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); } }); };});</script></body></html>
View Code
所需要的图片(这里好像上传不了压缩文件,所以不能整个打包上传了):
#复制下面的图片名称-鼠标移到图片上-右键-图片另存为-粘贴保存#
1.最外面的闪灯:ly-plate-c.gif
2.六个中奖内容:bg-lottery.png
3.点击抽奖按钮: playbtn.png
原标题:jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。