<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>年会抽奖</title>
<style>
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
.luckbox{
width: 540px;
}
.luckbox ul{
overflow: hidden;
}
.luckbox .item{
width: 50px;
height: 50px;
background: red;
margin: 5px;
float: left;
}
.luckbox .item.active{
background: green;
}
</style>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head>
<body>
<div class="luckbox" id="luckbox">
<ul id="name">
<li class="item active" ></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
</div>
<script>
var times = 0;
var cle = null;
$(function(){
document.onkeydown = function()
{
times = times+1;
//console.log(times);
//奇数
time();
};
/**
* 改变样式
*/
function add()
{
var num = $("#name").find('li').length;
var nu = Math.floor(Math.random()*num);
$(".item").removeClass('active');
$("#name li").eq(nu).addClass('active');
}
/**
* 递归判断
*/
function time()
{
//奇数
if((times%2==0))
{
clearTimeout(cle); //清楚定时器
//这里去获取随机选中的值
console.log('helo');
alert('helo');
return false;
}
add();
cle = setTimeout(time,100)
}
});
</script>
<!-- <script src="js/js.js"></script> --></body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。