本文介绍了如何使用JavaScript编写一个幸运大转盘的案例。通过CSS设置转盘样式，HTML结构实现转盘元素布局，JavaScript控制转盘转动及停止。案例中，转盘由多个粉色背景的li元素组成，点击开始按钮启动定时器使转盘转动，每个li依次变为红色，当转动一圈回到初始位置后，继续转动。点击停止按钮则清除定时器，转盘停止。
css代码：
//设置HTML中标签的样式
<style type="text/css">
.items{
width:500px;
list-style: none;
margin:0 auto;
}
.items li{
width:150px;
height:150px;
float: left;
text-align: center;
line-height: 150px;
background:pink;
margin-left: 10px;
margin-top: 10px;
}
</style>
HTML代码：
//HTML中需要注意的是想要实现转盘一直转动，li标签一定要设置类名。否则的话，转盘只转一圈自动停止。
<body>
<ul class="items">
<li class="f1">幸运大抽奖</li>
<li class="f1">幸运大抽奖</li>
<li class="f1">幸运大抽奖</li>
<li class="f1">幸运大抽奖</li>
<li class="btn">
<button id="add">开始</button>
<button id="eve">停止</button>
</li>
<li class="f1">幸运大抽奖</li>
<li class="f1">幸运大抽奖</li>
<li class="f1">幸运大抽奖</li>
<li class="f1">幸运大抽奖</li>
</ul>
</body>
JavaScript代码：
<script type="text/javascript">
var li = document.getElementsByClassName("f1") //获取li标签；
var start = document.getElementById("add"); //通过ID名获取开始按钮；
var stop = document.getElementById("eve"); //通过ID名获取结束按钮；
var time = null; //声明一个JavaScript中的计时事件所用函数；
var arr = [0,1,2,4,7,6,5,3]; //声明数组重点：通过下标，实现幸运大转盘按照所需下标进行转动。
var num=0; //声明一个空的变量，用来存下标；
start.onclick = function(){ //开始按钮的函数
if(time != null){ //进行判断，如果时间函数不等于控制
return 停止函数循环
};
time = setInterval(function(){ //使用时间函数进行自动播放效果
for(var i = 0; i< li.length;i++){ //进行循环
li[i].style.background="pink"; //未转到li时的其它盒子背景颜色为粉色；
}
li[arr[num]].style.background="red"; //时间函数转到时盒子的背景颜色为红色；
num++ //盒子累加
if(num==li.length){ //判断，如果盒子转到最后一个时，让它回到0下标时继续转动
num=0
}
},1000)
}
stop.onclick = function(){ //停止时间函数
clearInterval(time);
time = null;
}
</script>
扫一扫
2812
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
