移动端H5 转盘抽奖
H5 移动 抽奖
2023-09-27 14:24:39 时间
移动端h5的转盘抽奖
项目介绍：根据用户id，每天可以抽奖一次，有实物奖、积分奖、及谢谢参与。
效果图：
具体 jqueryrotate 简单用法请参见：
https://www.cnblogs.com/joe235/p/13397737.html
html 代码：
<!DOCTYPE html> <html> <head> <title>抽奖</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="./css/SDraw.css"> </head> <body> <div class="g-content"> <div class="g-lottery-case"> <div class="g-left"> <h2>您已拥有<span class="playnum"></span>次抽奖机会，点击立刻抽奖！~</h2> <div class="g-lottery-box"> <div class="g-lottery-img"> <a class="playbtn" href="javascript:;" title="开始抽奖"></a> </div> </div> </div> </div> </div> <!-------------中奖弹窗页面--------------> <div class="zj-main" id="zj-main" style="display: none;"> <form class="txzl"> <h2>恭喜抽中<br /><span id="jiangpin"></span></h2> <p>请填写资料领取奖品：</p> <label>姓名：<input type="text" name="username" id="name" /></label> <label>电话：<input type="text" name="userphone" maxlength="11" id="phone" /></label> <label>地址：<input type="text" name="useraddress" id="address" /></label> <h4><sub>*</sub>未提交个人资料将视为放弃领取此次奖品</h4> <div class="info_tj">提交领奖</div> </form> <div class="close_zj"><img src="./images/close_1.png" /></div> </div> <script src="./js/rem.js"></script> <script src="./js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="./js/jquery.rotate.min.js" type="text/javascript"></script> <script src="./js/index.js"></script> </body> </html>
样式：
@charset "utf-8"; /* CSS Document */ /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;} header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;} table{border-collapse:collapse;border-spacing:0;} caption,th{text-align:left;font-weight:normal;} html,body,fieldset,img,iframe,abbr{border:0;} i,cite,em,var,address,dfn{font-style:normal;font-weight:normal;} [hidefocus],summary{outline:0;} ol,ul,li{list-style:none;} h1,h2,h3,h4,h5,h6,small{font-size:100%;font-weight:normal;} sup,sub{font-size:83%;} pre,code,kbd,samp{font-family:inherit;} q:before,q:after{content:none;content:'';} textarea{overflow:auto;resize:none;} label,summary{cursor:default;} a,button{cursor:pointer;} h1,h2,h3,h4,h5,h6,strong,b{font-weight:bold;} del,ins,u,s,a,a:hover{text-decoration:none;} body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;} body{background:#fff;} a,a:hover{color:#333;} .clearfix:after{content:'\20';display:block;height:0;clear:both} .clearfix{zoom:1} .g-content { width: 100%; background: #fbe3cc; height: auto; font-family: "微软雅黑", "microsoft yahei"; } .g-content .g-lottery-case { width: 5rem; height: 5.5rem; margin: 0 auto; overflow: hidden; } .g-content .g-lottery-case .g-left h2 { font-size: 0.2rem; line-height: 0.32rem; font-weight: normal; margin-left: 0.2rem; } .g-content .g-lottery-case .g-left { width: 4.5rem; } .g-lottery-box { width: 4.5rem; height: 4.5rem; margin-left: .3rem; position: relative; background: url(../images/ly-plate-c.gif) no-repeat; background-size: 100% 100%; } .g-lottery-box .g-lottery-img { width: 4rem; height: 4rem; position: relative; background: url(../images/bg-lottery.png) no-repeat; background-size: 100% 100%; left: .26rem; top: .26rem; } .g-lottery-box .playbtn { width: 1.87rem; height: 1.87rem; position: absolute; top: 1.05rem; left: 1.05rem; background: url(../images/playbtn.png) no-repeat; background-size: 100% 100%; } /*******中奖弹框页面*******/ .zj-main { width: 100%; height: 100%; margin: 0 auto; background-color: rgba(0, 0, 0, 0.7); background-size: 100% 100%; position: absolute; overflow: hidden; *zoom: 1; z-index: 10; left: center; top: 0; } .zj-main .txzl { width: 90%; height: auto; position: absolute; top: 28%; left: 5%; background: #fff; padding-top:.3rem; } .txzl h2 { font-size: .32rem; font-weight: bold; width: 100%; height: auto; margin: 0 auto; color: #e32d2c; line-height: 140%; text-align: center; } .txzl p { font-size: .26rem; width: 90%; height: auto; margin: 1% auto 0 auto; color: #232323; line-height: 150%; text-align: center; } .txzl label { width: 90%; height: auto; margin: 3% auto 0 auto; font-size: .26rem; color: #232323; display: block; text-align: center; } .txzl label input { height: auto; font-size: .26rem; border: none; line-height: 180%; border: 1px solid #ddd; } .txzl h4 { font-size: .26rem; font-weight: bold; width: 100%; height: auto; margin: 3% auto 0 auto; color: #e32d2c; line-height: 140%; text-align: center; } .txzl .info_tj { width: 50%; height: .6rem; font-size: .3rem; line-height: .6rem; color: #ffffff; text-align: center; background: #ad0004; -webkit-border-radius: .1rem; -moz-border-radius: .1rem; border-radius: .1rem; margin: 4% auto 6% auto } .zj-main .close_zj { width: 31px; height: 31px; position: absolute; top: 27%; right: 3.5%; }
index.js：
$(function () { $('#zj-main').fadeOut(); var $btn = $('.playbtn'); var playnum = 1; //初始次数，由后台传入 $('.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)]; 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; } } $btn.click(function () { if (isture) return; // 如果在执行就退出 isture = true; // 标志为 在执行 //先判断是否登录,未登录则执行下面的函数 if (1 == 2) { $('.playnum').html('0'); alert("请先登录"); isture = false; } else { //登录了就执行下面 if (playnum <= 0) { //当抽奖次数为0的时候执行 alert("没有次数了，请您明天再来"); $('.playnum').html(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: 8000, //旋转时间 animateTo: angle + 7200, //让它根据得出来的结果加上1440度旋转 callback: function () { isture = false; // 标志为 执行完毕 // alert(text); if (awards == 2 || awards == 5) { alert(text); } else { $("#zj-main").fadeIn(); $("#jiangpin").text(text); } } }); }; // 关闭弹框 $('.close_zj').click(function () { $('#zj-main').fadeOut(); //$('#ml-main').fadeIn(); }); // 手机号只能输入数字 $("#phone").bind("keyup", function () { $(this).val($(this).val().replace(/[\D]/g, "")); }); // 地址只能输入中文英文数字 $("#address").bind("keyup", function(){ $(this).val($(this).val().replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g, "")); }); // 验证中文名称 function isChinaName(name) { var pattern = /^[\u4E00-\u9FA5]{1,6}$/; return pattern.test(name); } // 验证规则函数 function formValidate() { var str = ''; // 判断名称 if ($.trim($('#name').val()).length == 0) { str += '姓名没有输入\n'; $('#name').focus(); } else { if (isChinaName($.trim($('#name').val())) == false) { str += '请输入中文姓名\n'; $('#name').focus(); } } // 判断手机号码 if ($.trim($('#phone').val()).length == 0) { str += '手机号没有输入\n'; $('#phone').focus(); } else { if ($.trim($('#phone').val()).length < 11) { str += '手机号位数不正确\n'; $('#phone').focus(); } } // 验证地址 if ($.trim($('#address').val()).length == 0) { str += '地址没有输入\n'; $('#address').focus(); } // 如果没有错误则提交 if (str != '') { alert(str); return false; } else { console.log($('#name').val()) console.log($('#phone').val()) console.log($('#address').val()) } }; // 点击提交领奖按钮 验证规则 $('.info_tj').on('click', function () { formValidate(); }); });
这里的 js 代码只贴了最基础的，可以根据自己的需求来进行修改。