首页 > 代码库 > js转盘抽奖
js转盘抽奖
这个是很简易的转盘,只用了html,css,js
通过css产生一个转盘上的指针,用js动态改变css中的transparent改变指针的角度。再添加一个背景图片类似于奖项的转盘
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dial</title> <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"dial.css"> <script type="text/javascript" src=http://www.mamicode.com/"dial.js"></script> </head> <body> <div id="sum"> <div id="content"> <div id="tri"> </div> <div id="center"><h1>抽奖</h1></div></div></div> </body> </html>
背景图片放在sum中,tri是指针上的三角形,center是指针上的圆,三角形和圆都在content中以便一起运动。
*{ margin: 0px; padding:0px; } #sum{ height: 550px; width: 700px; background-image: url(dial.jpg); position: relative; } #content{ padding: 0px; height: 140px; width: 140px; left: 289px; top: 109px; margin: 120px auto 0px; transform:rotate(0deg); position: absolute; } #center{ height: 140px; width: 140px; border-radius: 140px; background-color: #EE4F10; color: white; line-height: 140px; font-weight: bold; font-size: 30px; text-align: center; z-index: 2; position:relative; } #tri{ height: 0px; width: 0px; top: -27px; left: 26px; border-left: 45px solid transparent; border-right:45px solid transparent; border-bottom: 45px solid #EE4F10; z-index: -1; position: absolute; }
window.onload=function(){ var data=http://www.mamicode.com/[320,260,180,620,760,380]; var content=document.getElementById("content"); var center=document.getElementById("center"); center.onclick=play; var timer=null; var count=0; var degv=0; var random=0; function play(){ count=0; random=Math.floor(Math.random()*6); clearInterval(timer); timer=setInterval(function(){ roll(); },30); } function roll(){ degv=count++; degv=degv*20; if(degv==data[random]) { clearInterval(timer);} content.style.webkitTransform="rotate("+degv+"deg)"; content.style.msTransform="rotate("+degv+"deg)"; content.style.MozTransform="rotate("+degv+"deg)"; content.style.OTransform="rotate("+degv+"deg)"; content.style.transform="rotate("+degv+"deg)"; } }
设置一个定时器不断的调用roll方法不断的加指针旋转的角度,直到等于数组中随机选中的角度就会停下来。
js转盘抽奖
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。