现在我们再来写一个简单的大转盘
我们用到的东西和之前写的时钟是一样的，不过最多是代码复杂点
我们再来回顾一下之前时钟的用到的知识点
1.首先是CSS3中的2D旋转技术 用到的 transform（）方法 设置其中的rotate属性
2.其次用到了js中的计时技术一个是setInterval（）方法 一个是 setTimeout（）方法
setInterval（A,B） A代表的是要重复执行的方法 B代表的是要每隔多少毫秒执行一次
setTimeout（A.B） A代表的是要重复执行的方法 B代表多少毫秒后执行，只执行一次
3.删除计时器的方法clearInterval(a) clearTimeout(a) a要删除的计时器的变量名
下面就是代码实现了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#a{
position: absolute;
top: 100px;
left: 300px;
}
</style>
<script>
var i = 0;
var a;
var id1,id2,id3,id3;
window.onload=function(){
a = document.getElementById("a");
}
function changeDiv(){
i+=6;
a.style.transform="rotate("+i+"deg)";
}
function choujiang(){
//设置多个计时器
id1=setInterval("changeDiv()",20);
id2=setInterval("changeDiv()",20);
id3=setInterval("changeDiv()",20);
id4=setInterval("changeDiv()",20);
//逐秒删除计时器
setTimeout(function(){
clearInterval(id1);//删除计时器的方法clearInterval() clearTimeout()
},2000);
setTimeout(function(){
clearInterval(id2);
},3000);
setTimeout(function(){
clearInterval(id3);
},4000);
setTimeout(function(){
clearInterval(id4);
},5000);
}
</script>
<body>
<button onclick="choujiang()" >抽奖</button>
<img id="a" src="img/jt.png">
</body>
</html>