<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)

}

}

}

下一篇：js页面跳转常用的几种方式