javascript 抽奖
来源：互联网 发布：教育过程最优化 编辑：程序博客网 时间：2024/05/29 18:42
如图：
模拟抽奖的实现过程
旋转原理：当支持CSS3属性采用transform: rotate（角度deg）设置,当角度为正数时顺时针旋转，当为负数时逆时针旋转。如果是IE8及其以下，采用采用绝对定位设置top和left，模拟角度旋转。
run方法，参数angle指角度
function run(angle) { if (isIE) { cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + "px"; target.style.left = (orginW - target.offsetWidth) / 2 + "px"; } else if (target.style.MozTransform !== undefined) { target.style.MozTransform = "rotate(" + angle + "deg)"; } else if (target.style.OTransform !== undefined) { target.style.OTransform = "rotate(" + angle + "deg)"; } else if (target.style.webkitTransform !== undefined) { target.style.webkitTransform = "rotate(" + angle + "deg)"; } else { target.style.transform = "rotate(" + angle + "deg)"; } }模拟转盘加速，匀速和减速。当角度小于某个数值时，让其处于加速此处采用1.01的系数作为加速度，当大于某个数值时处于高速匀速状态，当角度大于设置的最大数值时，让其减速采用系数为0.99。设置负数作为减速的值（即变量 tmp），随即获取负360中的值（即变量 m），当大于这个值时，转盘停止。
var tmp = -900; var m = -parseInt(Math.random() * 360); timer = setInterval(function () { if (i > 3000) { tmp = parseInt(tmp * 0.99); if (tmp > m) { tmp = m; clearInterval(timer); msg(m); } run(tmp); } else if (i > 1000) { i = i + 45; run(i); } else { i = parseInt((i + 1) * 1.01); run(i); } }, 50);启动抽奖和重新设置抽奖
<input id="test" type="button" value="抽奖" /><input id="restart" style="display: none;" type="button" value="再抽一次" />m$('test').onclick = function () { m$('test').style.display = "none"; showMsg(); } m$('restart').onclick = function () { m$('restart').style.display = "none"; if (isIE) { m$("demo").style.top = "0px"; m$("demo").style.left = "0px"; } else if (m$("demo").style.MozTransform !== undefined) { m$("demo").style.MozTransform = 'rotate(0deg)'; } else if (m$("demo").style.OTransform !== undefined) { m$("demo").style.OTransform = 'rotate(0deg)'; } else if (m$("demo").style.webkitTransform !== undefined) { m$("demo").style.webkitTransform = 'rotate(0deg)'; } else { m$("demo").style.transform = 'rotate(0deg)'; } m$('test').style.display = "block"; i = 0; }完整代码demo:
<!DOCTYPE html><html><head> <title>抽奖</title> <style type="text/css"> #container{width: 400px;height: 400px;position: relative;margin: 0 auto;} #demo{position: absolute;filter: progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand");} </style></head><body style="height: 1000px;"> <div id="container"> <div id="demo"> <img alt="" src="http://images.cnblogs.com/cnblogs_com/kuikui/354173/r_a.png" width="400" height="400" /> </div> </div> <input id="test" type="button" value="抽奖" /> <input id="restart" style="display: none;" type="button" value="再抽一次" /> <div id="msg"> </div> <script type="text/javascript"> var m$ = function (id) { return document.getElementById(id); } var ua = navigator.userAgent; var isIE = /msie/i.test(ua) && !window.opera; var i = 1, sinDeg = 0, cosDeg = 0, timer = null; var mRotate = function () { var rotate = function (target, msg) { target = m$(target); var orginW = target.clientWidth, orginH = target.clientHeight; clearInterval(timer); function run(angle) { if (isIE) { cosDeg = Math.cos(angle * Math.PI / 180); sinDeg = Math.sin(angle * Math.PI / 180); with (target.filters.item(0)) { M11 = M22 = cosDeg; M12 = -(M21 = sinDeg); } target.style.top = (orginH - target.offsetHeight) / 2 + "px"; target.style.left = (orginW - target.offsetWidth) / 2 + "px"; } else if (target.style.MozTransform !== undefined) { target.style.MozTransform = "rotate(" + angle + "deg)"; } else if (target.style.OTransform !== undefined) { target.style.OTransform = "rotate(" + angle + "deg)"; } else if (target.style.webkitTransform !== undefined) { target.style.webkitTransform = "rotate(" + angle + "deg)"; } else { target.style.transform = "rotate(" + angle + "deg)"; } } var tmp = -900; var m = -parseInt(Math.random() * 360); timer = setInterval(function () { if (i > 3000) { tmp = parseInt(tmp * 0.99); if (tmp > m) { tmp = m; clearInterval(timer); msg(m); } run(tmp); } else if (i > 1000) { i = i + 45; run(i); } else { i = parseInt((i + 1) * 1.01); run(i); } }, 50); } return { rotate: rotate } } (); function showMsg() { mRotate.rotate("demo", function msg(m) { if (m > -90 && m < -30) { m$("msg").innerHTML += "22222222"; } else if (m > -150 && m < -90) { m$("msg").innerHTML += "333333333"; } else if (m > -210 && m < -150) { m$("msg").innerHTML += "444444"; } else if (m > -270 && m < -210) { m$("msg").innerHTML += "5555555"; } else if (m > -330 && m < -270) { m$("msg").innerHTML += "6666666"; } else { m$("msg").innerHTML += "111111111"; } m$('restart').style.display = "block"; }); } window.onload = function () { m$('test').onclick = function () { m$('test').style.display = "none"; showMsg(); } m$('restart').onclick = function () { m$('restart').style.display = "none"; if (isIE) { m$("demo").style.top = "0px"; m$("demo").style.left = "0px"; } else if (m$("demo").style.MozTransform !== undefined) { m$("demo").style.MozTransform = 'rotate(0deg)'; } else if (m$("demo").style.OTransform !== undefined) { m$("demo").style.OTransform = 'rotate(0deg)'; } else if (m$("demo").style.webkitTransform !== undefined) { m$("demo").style.webkitTransform = 'rotate(0deg)'; } else { m$("demo").style.transform = 'rotate(0deg)'; } m$('test').style.display = "block"; i = 0; } } </script></body></html>转载自:http://www.9958.pw/post/js_choujiang
0 0
- JavaScript 抽奖
- javascript 抽奖
- JavaScript抽奖小程序
- javascript在线抽奖
- javascript 抽奖程序
- JavaScript随机抽奖
- JavaScript之幸运抽奖
- JavaScript写的抽奖程序
- JavaScript写的抽奖程序
- JavaScript写的抽奖程序
- 简单的javascript抽奖程序
- 原生javascript实现抽奖动画
- 抽奖
- 抽奖
- 抽奖
- 抽奖
- 抽奖
- 抽奖
- 两个小软件的分享
- 使用npm安装一些包失败了的看过来（npm国内镜像介绍）
- SortedSet和TreeSet
- 《hadoop进阶》web日志系统 KPI指标的分析与实现
- ztr loves math
- javascript 抽奖
- 《More Effective C++》读书笔记-效率
- 多种多样APP主界面Tab实现
- servlet、jsp跳转(传值)总结及URL传参数
- 第二次打字测试
- linux内存源码分析 - 内存回收(lru链表)
- Java重拾之猜数字小游戏
- bootstrap表单验证插件 经验记录 与RSA加密事件配合修改
- Android广播机制
