基于js的九宫格抽奖

<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>
#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;
}

 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)
         }
     }
 }
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

WGS.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值