幸运抽奖
2018-06-24 02:02:29来源:未知 阅读 ()
var oPointer=document.getElementsByTagName("img")[0]; var oTurnable=document.getElementsByTagName("img")[1]; var cat=15;//每个区域15度,一共24个区域 var num=0; var offOn=true;//是否正在抽奖 //指针点击事件,开始抽奖 oPointer.onclick=function(){ if(offOn){ oTurnable.style.transform="rotate(0deg)"; offOn=!offOn; ratating(); } } //旋转 function ratating(){ var timer=null; var rdm=0;//随机度数 clearInterval(timer); timer=setInterval(function(){ if(Math.floor(rdm/360)<3){ rdm=Math.floor(Math.random()*3600); } else{ oTurnable.style.transform="rotate("+rdm+"deg)"; clearInterval(timer); setTimeout(function(){ offOn=!offOn; num=rdm%360; // 转盘逆时针的角度为正值 if(num<=cat*1){ alert("四等奖"); console.log("rdm="+rdm+",num="+num+","+"四等奖"); } else if(num<=cat*2){ alert("周君记"); console.log("rdm="+rdm+",num="+num+","+"周君记"); } else if(num<=cat*3){ alert("二等奖"); console.log("rdm="+rdm+",num="+num+","+"二等奖"); } else if(num<=cat*4){ alert("周君记"); console.log("rdm="+rdm+",num="+num+","+"周君记"); } else if(num<=cat*5){ alert("三等奖"); console.log("rdm="+rdm+",num="+num+","+"三等奖"); } else if(num<=cat*6){ alert("四等奖"); console.log("rdm="+rdm+",num="+num+","+"四等奖"); } else if(num<=cat*7){ alert("幸运奖"); console.log("rdm="+rdm+",num="+num+","+"幸运奖"); } else if(num<=cat*8){ alert("周君记"); console.log("rdm="+rdm+",num="+num+","+"周君记"); } else if(num<=cat*9){ alert("一等奖"); console.log("rdm="+rdm+",num="+num+","+"一等奖"); } else if(num<=cat*10){ alert("周君记"); console.log("rdm="+rdm+",num="+num+","+"周君记"); } else if(num<=cat*11){ alert("幸运奖"); console.log("rdm="+rdm+",num="+num+","+"幸运奖"); } else if(num<=cat*12){ alert("四等奖"); console.log("rdm="+rdm+",num="+num+","+"四等奖"); } else if(num<=cat*13){ alert("三等奖"); console.log("rdm="+rdm+",num="+num+","+"三等奖"); } else if(num<=cat*14){ alert("周君记"); console.log("rdm="+rdm+",num="+num+","+"周君记"); } else if(num<=cat*15){ alert("二等奖"); console.log("rdm="+rdm+",num="+num+","+"二等奖"); } else if(num<=cat*16){ alert("周君记"); console.log("rdm="+rdm+",num="+num+","+"周君记"); } else if(num<=cat*17){ alert("四等奖"); console.log("rdm="+rdm+",num="+num+","+"四等奖"); } else if(num<=cat*18){ alert("幸运奖"); console.log("rdm="+rdm+",num="+num+","+"幸运奖"); } else if(num<=cat*19){ alert("周君记"); console.log("rdm="+rdm+",num="+num+","+"周君记"); } else if(num<=cat*20){ alert("幸运奖"); console.log("rdm="+rdm+",num="+num+","+"幸运奖"); } else if(num<=cat*21){ alert("四等奖"); console.log("rdm="+rdm+",num="+num+","+"四等奖"); } else if(num<=cat*22){ alert("三等奖"); console.log("rdm="+rdm+",num="+num+","+"三等奖"); } else if(num<=cat*23){ alert("周君记"); console.log("rdm="+rdm+",num="+num+","+"周君记"); } else if(num<=cat*24){ alert("幸运奖");
console.log("rdm="+rdm+",num="+num+","+"幸运奖"); } },4000); } },30); }
#bg{ width: 650px; height: 600px; margin:0 auto; background: url(turnable-bg.jpg) no-repeat; position:relative; } /*img从alt开始匹配,直到pointer结束为止*/ img[alt="pointer"]{ position:absolute; top:125px; left:310px; z-index:10; } img[alt="turnable"]{ position:absolute; z-index:5; top:50px; left:80px; transition:all 4s; }
<div id="bg"> <img src="指针.png" alt="pointer" width="31px" height="182px"> <img src="转盘.png" alt="turnable" width="496px" height="500px"> </div>
抽奖代码里要注意一个地方,就是转动角度:在计算机语言里,逆时针的转动才算是正方向,而顺时针为负方向。
总结步骤:1.找好图片素材,当然也可以自己设计一个。(圆盘和指针)
2.先用html将素材写至页面当中。
3.设置好样式,呈现好看的页面效果。
4.最重要的部分就是在js这块的实现部分:
. (1)点击事件;
(2)旋转度数的设置(间歇调用,判断语句)
效果如下:
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- echarts字体适配 2019-05-10
- js字符串如何倒序 2018-12-02
- 撩课-Web大前端每天5道面试题-Day1 2018-11-26
- 前端js获取checkbox的值 2018-11-20
- CSS Variables 2018-06-24
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash