每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.list {
margin: 50px auto;
padding: 0;
list-style-type: none;
width: 300px;
position: relative;
}
.list li {
position: absolute;
border: 1px solid #000;
width: 98px;
height: 98px;
text-align: center;
line-height: 98px;
font-size: 20px;
}
.list li:nth-of-type(1){
left: 0;
top: 0;
}
.list li:nth-of-type(2){
left: 100px;
top: 0;
}
.list li:nth-of-type(3){
left: 200px;
top: 0;
}
.list li:nth-of-type(4){
left: 200px;
top: 100px;
}
.list li:nth-of-type(5){
left: 100px;
top: 100px;
}
.list li:nth-of-type(6){
left: 200px;
top: 200px;
}
.list li:nth-of-type(7){
left: 100px;
top: 200px;
}
.list li:nth-of-type(8){
left: 0px;
top: 200px;
}
.list li:nth-of-type(9){
left: 0px;
top: 100px;
}
.list span {
display: block;
height: 100%;
background: #ccc;
}
.list .show {
background: #f60;
color: #fff;
}
</style>
<script type="text/javascript">
window.onload = function(){
var spans = document.querySelectorAll('span');
var a = document.querySelector('a');
var nub = 5;
var timer = 0;
a.onclick = function(){
var target = [0,1,5,2,7];
var length = (Math.round(Math.random()*4) + 2)*spans.length+1+target[Math.floor(Math.random()*target.length)];
var arr = [];
var now = 0;
var delay = 50;
console.log(length);
for(var i = 0; i < length; i++){
arr.push(i);
}
setShow();
function setShow(){
timer = setTimeout(function(){
for(var i = 0; i < spans.length; i++){
spans[i].className = "";
}
spans[arr[now]%spans.length].className = "show";
now++;
//递归终止条件
if(now < arr.length){
delay += 10;
setShow();
}
},delay);
}
};
};
</script>
</head>
<body>
<ul class="list">
<li>
<span>三等奖</span>
</li>
<li>
<span>谢谢惠顾</span>
</li>
<li>
<span>三等奖</span>
</li>
<li>
<span>二等奖</span>
</li>
<li>
<a href="#">开始抽奖</a>
</li>
<li>
<span>一等奖</span>
</li>
<li>
<span>谢谢惠顾</span>
</li>
<li>
<span>二等奖</span>
</li>
<li>
<span>三等奖</span>
</li>
</ul>
</body>
</html>
每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归的更多相关文章
- 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
@charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
- 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作
以下是简易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
- 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之商品筛选。主要知识点：DOM方法综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之日历制作。主要知识点：日期函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之留言板。主要知识点：DOM方法的理解和运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之树菜单。主要知识点：DOM方法综合运用，递归运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
随机推荐
- 【STL】reverse函数用法
reverse函数的功能是反转排序一个容器中指定元素的内容. 函数参数:reverse(first,last), 其中first,last分别指向被反转序列中初始及末尾位置的双向迭代器(Bidirec ...
- Spring多种加载Bean方式简析
1 定义bean的方式 常见的定义Bean的方式有: 通过xml的方式,例如: <bean id="dictionaryRelMap" class="java.ut ...
- redis多端口，多实例。
本屌的redis装载/usr/local/redis了 cp 一份配置 vim 配置文件 port 修改 bind 绑定ip,默认0.0.0.0所有用户允许访问. dbfilename cac ...
- selenium操作拖拽实现无效果的替代方案
如果碰到这种情况,无论你是直接通过draganddrop()还是分步执行clickandhold(),dragtoelement(),或通过by_offset位移都无法实现元素拖拽.只能物理模拟了 w ...
- PHP获取Post的原始数据方法小结(POST无变量名)
From : http://blog.csdn.net/hotdigger/article/details/6456240 一般我们都用$_POST或$_REQUEST两个预定义变量来接收POST ...
- 蓝桥杯-马虎的算式-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- 优化UI控件 【译】
翻译自:https://unity3d.com/cn/learn/tutorials/topics/best-practices/optimizing-ui-controls?playlist=300 ...
- 极光的开源礼物「Aurora IMUI」
今日,奉上我们拙作,仅为开源世界献出绵薄之力. Aurora IMUI,一个通用的即时通讯(IM)UI 库.不局限于任何 IM SDK. 本 UI 库提供了消息列表.输入视图等常用组件. 初心 过去的 ...
- linux 内核的另一个自旋锁 - 读写锁
除spinlock外,linux 内核还有一个自旋锁,名为arch_rwlock_t.它的头文件是qrwlock.h,包含在spinlock.h,头文件中对它全称为"Queue read/w ...
- SQL中LEFT JOIN 和 inner join 的区别
student表 sc 表 首先where条件a.Sid = b.Sid 查询 SELECT * FROM student a,sc b WHERE a.Sid = b.Sid GROUP BY a. ...