JS实现简单的抽奖转盘效果示例
更新时间：2019年02月16日 11:53:01 作者：s_psycho
这篇文章主要介绍了JS实现简单的抽奖转盘效果,涉及javascript数值计算与页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了JS实现简单的抽奖转盘效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net JS抽奖转盘</title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
.big{
width: 318px;
height: 318px;
margin:100px auto;
}
.big>div{
width: 100px;
height: 100px;
background: pink;
float: left;
line-height: 100px;
text-align: center;
border: solid;
}
.big>div:nth-of-type(5){
background: yellow;
cursor: pointer;
}
#act{
background: red;
}
</style>
</head>
<body>
<div class="big">
<div class="small" id="act">1</div>
<div class="small">2</div>
<div class="small">3</div>
<div class="small">8</div>
<div id="cj">点击抽奖</div>
<div class="small">4</div>
<div class="small">7</div>
<div class="small">6</div>
<div class="small">5</div>
</div>
<script>
var arrDiv=document.getElementsByClassName("small");
var oCj=document.getElementById("cj");
var num=0;
var shijian=Math.random()*5000+3200;
oCj.onclick=function(){
oTime=setInterval(dianji,200);
}
function dianji() {
num=num+1;
if (num>arrDiv.length-1){
num=0
}
for(j=0;j<arrDiv.length;j++){
arrDiv[j].id="";
}
arrDiv[num].id="act";
setTimeout(tingzhi,shijian);
function tingzhi() {
clearInterval(oTime)
}
}
</script>
</body>
</html>
使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行效果：
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
本文主要介绍了js定时器不准确问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
不错的获取div高度的代码，主要是方便测试一些信息，用到了javascript的offsetHeight属性2008-08-08
复制js对象方法，需要的朋友可以参考下2013-07-07
这篇文章主要介绍了让html页面不缓存js的实现方法,分析了HTML页面缓存js的原理,并由此分析实现不缓存js的方法,是非常实用的技巧,需要的朋友可以参考下2014-10-10
这篇文章主要介绍了javascript中的set的常用方法和操作,在JavaScript中Set是一种特殊的数据结构,用于存储唯一的值,创建Set对象可以通过new Set()实现,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-11-11
下面小编就为大家带来一篇js + css实现标签内容切换功能(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
在很多时候，前端开发人员使用JS脚本，对页面Dom结构或者是样式做出了修改，会造成一些意想不到的bug2012-03-03
这篇文章主要给大家介绍了在webpack打包后直接访问页面图片路径错误的解决方法，文中介绍的非常详细，对遇到这个问题的朋友们具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-06-06
最近小编在项目中用到了一款带轮播组件，功能非常齐全，可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能，下面小编通过本文给大家详细介绍下实现过程，需要的朋友参考下吧2016-11-11
使用利用事件冒泡委托给列表的父节点去处理的方式第二种方式就是使用闭包了，感兴趣的你可以参考下本文，或许对你学习js有所帮助2013-03-03
最新评论