网上下载了一些转盘demo来学习，记录如下：
实现方式
1、转盘要么为纯图片， 利用 rotate控制 图片旋转
2、转盘要么是JS手绘的，使用canvas标签，通过控制 CSS 改变 来旋转
重要 的地方
概率：初始化权重值，使 用M ath.floor(Math.random()*sum取得随机数
旋转基数：转盘旋转一圈后并不是回到原点，所以下次改变角度的时候要算上之前旋转过的度数，所以转盘转过一圈的时候要把旋转基数+1
旋转度数：旋转度数控制停留的位置，使用setTimeout来控制旋转的时间
代码带详细注释：【图片实现方式】
.bkgd{ m arg in: auto; mar gin -t op:10rem; background: url(" .. /images/disc-bg.gif") no-re PE at scroll 0 0 transparent; background-size : 100%; h ei ght:15rem; width:15rem; pos IT ion: relative; } . img s{ position: absolute; width: 12rem; height: 12rem; margin-top:1.4rem; margin-left:1.6rem; } .arrow{ background: url("images/arrow.png") no-repeat scroll 0 0 transparent; background- Size: 100%; height: 7rem; width: 1.1rem; margin-left: 7rem; margin-top: 3rem; position: absolute; } .lot- BT n{ background: url("images/buttons_02.png") no-repeat scroll 0 0 transparent; background -s ize: 100%; height: 2.9rem; width: 2.9rem; overflow: hidden; position: absolute; border: none; cursor: pointer; margin-left: 6.1rem; margin-top: 6rem; } $(function(){ VAR clickNum = 5;//可抽奖次数 var rotNum = 0;//旋转基数,转盘转过一圈则旋转基数+1 var angles;//旋转角度 var notice = null;//中奖公告 var data = [ { "info":"100G永久 免费空间 ", " PR obability":10 }, { "info":" 360 经验值", "probability":10 }, { "info":"100M空间", "probability":10 }, { "info":"36经验值", "probability":100 }, { "info":"360M空间", "probability":10 }, { "info":"100经验值", "probability":10 }, { "info":"36M空间", "probability":10 } ] $(" # lot-btn").click(function(){ if (clickNum >= 1){ clickNum = clickNum-1; //可抽奖次数减一 rotNum ++; //旋转基数加一 runCup(); //转盘旋转 $('#lot-btn').attr("disabled", true); setTimeout(function(){ alert(notice); $("#lot-btn").attr("disabled", false); },1800); } else{ alert("亲，抽奖次数已用光！"); } }) //转盘旋转，将各个变量结果赋值 function runCup(){ var resultinfo = getResult(); notice = '恭喜获得：' + resultinfo; angles = rotNum*1080 + getAngles(resultinfo); $("#imgs").rotate({ ani MATE To: angles, duration: 1800 }); } //随机一个结果用以展示 function getResult(){ var sum = 0; var rand = 0; //随机数 var result = 0; //取得权重总数 for (var i = 0; i < data.length; i++ ) { sum += data[i].probability } console. LOG ( sum ); //从总数里面随机一个数，并对应输入随机的值 for (var i = 0; i < data.length; i++) { rand = Math.floor(Math.random()*sum + 1); if (data[i].probability >= rand) { result = data[i].info; br eak; } else { sum -= data[i].probability; } } console.log( result ); return result; } //获得旋转结果对应的旋转度数 function getAngles(resultinfo){ var num //查找结果的位置 for (var i = 0; i < data.length; i++) { if( resultinfo == data[i].info ){ num = i; break }else{ console.log( "不相等，继续循环" ); } } console.log( num ); if( num == 0 ){angles = 1825; }else if( num == 1 ){angles = 1775; }else if( num == 2 ){angles = 1725; }else if( num == 3 ){angles = 1675; }else if( num == 4 ){angles = 1625; }else if( num == 5 ){angles = 1925; }else if( num == 6 ){angles = 1875; }else{console.log( "error" ); } return angles; } }) 原始demo来 源 网络， 应该 很容易搜到~~CSS修改是想弄个移动端自适应，但是并没有做得很好r(s-t)q
@H_ 126 _31@网上下载了一些转盘demo来学习，记录如下：
实现方式
1、转盘要么为纯图片，利用rotate控制图片旋转
2、转盘要么是JS手绘的，使用canvas标签，通过控制CSS改变来旋转
重要的地方
概率：初始化权重值，使用Math.floor(Math.random()*sum取得随机数
旋转基数：转盘旋转一圈后并不是回到原点，所以下次改变角度的时候要算上之前旋转过的度数，所以转盘转过一圈的时候要把旋转基数+1
旋转度数：旋转度数控制停留的位置，使用setTimeout来控制旋转的时间
代码带详细注释：【图片实现方式】
.bkgd{ margin: auto; margin-top:10rem; background: url("images/disc-bg.gif") no-repeat scroll 0 0 transparent; background-size: 100%; height:15rem; width:15rem; position: relative; } .imgs{ position: absolute; width: 12rem; height: 12rem; margin-top:1.4rem; margin-left:1.6rem; } .arrow{ background: url("images/arrow.png") no-repeat scroll 0 0 transparent; background-size: 100%; height: 7rem; width: 1.1rem; margin-left: 7rem; margin-top: 3rem; position: absolute; } .lot-btn{ background: url("images/buttons_02.png") no-repeat scroll 0 0 transparent; background-size: 100%; height: 2.9rem; width: 2.9rem; overflow: hidden; position: absolute; border: none; cursor: pointer; margin-left: 6.1rem; margin-top: 6rem; } $(function(){ var clickNum = 5;//可抽奖次数 var rotNum = 0;//旋转基数,转盘转过一圈则旋转基数+1 var angles;//旋转角度 var notice = null;//中奖公告 var data = [ { "info":"100G永久免费空间", "probability":10 }, { "info":"360经验值", "probability":10 }, { "info":"100M空间", "probability":10 }, { "info":"36经验值", "probability":100 }, { "info":"360M空间", "probability":10 }, { "info":"100经验值", "probability":10 }, { "info":"36M空间", "probability":10 } ] $("#lot-btn").click(function(){ if (clickNum >= 1){ clickNum = clickNum-1; //可抽奖次数减一 rotNum ++; //旋转基数加一 runCup(); //转盘旋转 $('#lot-btn').attr("disabled", true); setTimeout(function(){ alert(notice); $("#lot-btn").attr("disabled", false); },1800); } else{ alert("亲，抽奖次数已用光！"); } }) //转盘旋转，将各个变量结果赋值 function runCup(){ var resultinfo = getResult(); notice = '恭喜获得：' + resultinfo; angles = rotNum*1080 + getAngles(resultinfo); $("#imgs").rotate({ animateTo: angles, duration: 1800 }); } //随机一个结果用以展示 function getResult(){ var sum = 0; var rand = 0; //随机数 var result = 0; //取得权重总数 for (var i = 0; i < data.length; i++) { sum += data[i].probability } console.log( sum ); //从总数里面随机一个数，并对应输入随机的值 for (var i = 0; i < data.length; i++) { rand = Math.floor(Math.random()*sum + 1); if (data[i].probability >= rand) { result = data[i].info; break; } else { sum -= data[i].probability; } } console.log( result ); return result; } //获得旋转结果对应的旋转度数 function getAngles(resultinfo){ var num //查找结果的位置 for (var i = 0; i < data.length; i++) { if( resultinfo == data[i].info ){ num = i; break }else{ console.log( "不相等，继续循环" ); } } console.log( num ); if( num == 0 ){angles = 1825; }else if( num == 1 ){angles = 1775; }else if( num == 2 ){angles = 1725; }else if( num == 3 ){angles = 1675; }else if( num == 4 ){angles = 1625; }else if( num == 5 ){angles = 1925; }else if( num == 6 ){angles = 1875; }else{console.log( "error" ); } return angles; } }) 原始demo来源网络，应该很容易搜到~~CSS修改是想弄个移动端自适应，但是并没有做得很好r(s-t)q
觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-web前端：HTML5抽奖转盘demo 全部内容，希望文章能够帮你解决 html5教程-web前端：HTML5抽奖转盘demo 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-web前端：HTML5抽奖转盘demo的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did219336