素JavaScript怎么实现一个九宫格抽奖功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
具体内容如下
计算
安全
数据库
网络和加速
企业服务
<div id="contaner">
<div id="one">一块钱</div>
<div id="two">谢谢惠顾</div>
<div id="three">下去写作业</div>
<div id="four">一局游戏</div>
<div id="five">点击抽奖</div>
<div id="six">两块钱</div>
<div id="seven">下去写作业</div>
<div id="eight">谢谢惠顾</div>
<div id="nigth">两局游戏</div>
</div>CSS：
#contaner {
width:606px;
height:606px;
border:1px solid #cccccc;
margin:40px auto;
}
#contaner div {
width:200px;
height:200px;
background:#09f;
text-align:center;
color:#fff;
font-size:16px;
font-weight:bold;
line-height:200px;
float:left;
border:1px solid #cccccc;
}
#contaner #five {
transition:all 0.5s ease-in-out 0s;
}
#contaner #five:hover {
cursor:pointer;
font-size:25px;
transform:scale(1.2) rotate(360deg);
background:#fff;
color:#09f;
}
.ys {
transform:scale(1.2);
box-shadow:0 0 0 200px red inset;
}js：
window.onload = function() {
var $ = function(id) {
return document.getElementById(id);
}
var contaner = $('contaner');
var divs = contaner.getElementsByTagName('div');
var one = $('one');
var two = $('two');
var three = $('three');
var four = $('four');
var five = $('five');
var six = $('six');
var seven = $('seven');
var eight = $('eight');
var night = $('night');
var k = 0;
var flag = true;
five.onclick = function() {
if (flag) {
var l = Math.ceil(Math.random() * 10000);
clearInterval(time);
var time = setInterval(function() {
for (var i = 0; i < divs.length; i++) {
divs[i].className = '';
}
divs[k].className = 'ys';
switch (k) {
case 0:
case 1:
k++;
break;
case 2:
case 5:
k += 3;
break;
case 8:
case 7:
k--;
break;
case 6:
case 3:
k -= 3;
break;
}
}, 100)
flag = false;
var jc = setTimeout(function() {
clearInterval(time);
flag = true;
}, l)
}
}
}关于素JavaScript怎么实现一个九宫格抽奖功能问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
