<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
list-style: none;
}
li{
text-align: center;
width: 100px;
height: 100px;
border: 1px solid #000;
float: left;
background: #ccc;
}
.box{
width: 306px;
margin: 100px auto 0;
position: relative;
}
ul{
width: 306px;
}
.ok{
width: 200px;
border: 1px solid #000;
text-align: center;
padding: 10px 30px;
background: #ccc;
position: absolute;
top: -50px;
left: 50%;
margin-left: -100px;
}
#ok span{
color: red;
}
#go{
position: absolute;
right:63px;
top: 103px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="ok">恭喜你中了<span id="ok"></span>等奖</div>
<input type="button" id="go" value="抽奖" />
<ul>
<li>女朋友</li>
<li>幸运奖</li>
<li>一个亿</li>
<li>考试全过</li>
<li>新手机</li>
<li>新电脑</li>
<li>哈哈哈</li>
<li>崩溃了</li>
<li>写完了</li>
</ul>
</div>
</body>
<script>
var go = document.getElementById('go');
var ok = document.getElementById('ok');
var lis = document.getElementsByTagName('li');
var num ;
var n=-1;
function run () {
n++;
num--;
for (var i=0;i<lis.length;i++) {
lis[i].style.background = '';
}
lis[n].style.background = 'red';
if (num<=0) {
clearInterval(dsq);
ok.innerHTML = n+1;
}
if (n>=8) {
n=-1
}
}
var dsq;
go.onclick = function () {
clearInterval(dsq);
n=-1
num = parseInt(Math.random()*10)+9;
dsq = setInterval('run()',100);
}
</script>
</html>
2125016438张瀚驭九宫格.rar （2个子文件） 
2125016438张瀚驭抽奖 css img 
抽奖.html 2KB index.html 123B js 资源评论
Jh1ly
- 粉丝: 0
- 资源: 1
最新资源
- java swing版贪吃蛇小游戏,视频教程课件snake-master.zip
- C语言基础算法习题集C-Practice-and-study-master.zip
- 烦人的村民整合包6.0最新版
- python-Day13 进程和线程.rar
- python-11Day 文件和异常.rar
- Typora 的 Markdown 语法.pdf
- PPT模版，可旋转式高级模版
- 支持共享任务栈的协作式内核，专门定位小RAM的MCU，目前提供了共享栈任务调度和软定时器等基本功能 单片机项目
- torch实现的 Unet++ 图像语义分割源码、二值图像分割
- 本项目是IntelliJ IDEA的插件，能帮助java开发者自动生成javadoc文档注释.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
