您的位置：首页 > Web前端 > JavaScript

九宫格抽奖HTML+JS版

2015-08-25 14:43 489 查看

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div{
margin: 100px auto 0px; // 居中
width:500px;
height:250px;
border:3px solid black; // 边框
}
li{
width:129px;
height:59px;
border:3px solid  black;
float:left;   // 向左浮动
margin:8px 0 0 8px; // 设置图片间的间距
list-style:none;
}
.btn{
border:3px solid blue;  // 设置为红色边框
cursor:pointer;        // 设置光标类型为指针
}
.cur{
border:3px solid red;  // 设置为红色边框
}
</style>
<title>zhuanpan</title>
</head>
<body>
<div>
<ul>
<li id="c1">1</li>
<li id="c2">2</li>
<li id="c3">3</li>
<li id="c8">谢谢参与</li>
<li class="btn" onclick="run();">点击抽奖</li>
<li id="c4">1</li>
<li id="c7">2</li>
<li id="c61">3</li>
<li id="c51">谢谢参与</li>
</ul>
</div>
</body>
</html>

<script type="text/javascript" src="http://www.jiurong.com/public/2014_2/js/jquery.min.js?v=1.5.5.8.27"></script>
<script type="text/javascript">
// 整个转动过程所需的步骤

var step = [
['c1',0],    // 第一个元素特殊设置
['c1', 500],
['c2', 100],
['c3', 300],
['c4', 200],
['c5', 200],
['c6', 200],
['c7', 200],
['c8', 200],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 200],
['c3', 300],
['c4', 300],
['c5', 300],
['c6', 300],
['c7', 300],
['c8', 300],
['c1', 400],
['c2', 400],
['c3', 400],
['c4', 400],
['c5', 400],
['c6', 400],
['c7', 400],
['c8', 400]
];

// 记录当前步数，即step数组的下标
var current = 1;

// 设置样式和重新设置定时器
function run(){
// 删除之前设置的cur类
$('#'+step[current-1][0]).removeClass('cur');
// 为当前元素设置cur类
$('#'+step[current][0]).addClass('cur');

// 判断step数组所有步骤是否已经走完
if(current == step.length - 1){

alert(step[current][0]);
window.location.reload();
}else{
// 重新设置定时器
setTimeout('run()', step[current][1]);
current++;
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航