<!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函数，数组方法，递归的更多相关文章

  1. 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用

    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...

  2. 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作

    以下是简易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...

  4. 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  5. 每天一个JS 小demo之商品筛选。主要知识点：DOM方法综合运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  6. 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  7. 每天一个JS 小demo之日历制作。主要知识点：日期函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 每天一个JS 小demo之留言板。主要知识点：DOM方法的理解和运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  9. 每天一个JS 小demo之树菜单。主要知识点：DOM方法综合运用，递归运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

随机推荐

  1. DateTime.Now的一些用法

    System.DateTime.Now.ToString("D");   //Tuesday, December 13, 2016 System.DateTime.Now.ToSt ...

  2. Redis编码问题

    最近搞redis存储对象出了点问题,大概说一下背景,项目原有的东东以前存的是redis,存储的直接是对象模型,没有问题,这里存储对象存储任何信息事都没有问题的.但是现在调整为存储序列化的json字符串 ...

  3. Linux防火墙配置—访问外网WEB

    一.实验目标 1.本次实验在"Linux基础网络搭建实验"的基础上,在外网虚拟机上搭建WEB服务,并分别配置外网和网关的防火墙规则,使内网能够访问WEB服务 2.Linux基础网络 ...

  4. 1.2 N层架构

    N层架构 介绍 ABP架构 其他(通用) 领域层 应用层 基础设施层 网络和展现层 其他 总结 介绍 应用程序代码库的分层架构是被广泛认可的可以减少程序复杂度.提高代码复用率的技术.为了实现分层架构, ...

  5. 带你玩转 jQuery

    一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...

  6. Set ,List,ArrayList,LinkedList,Vectory,HashMap,Hashtable,HashSet,TreeSet,TreeSet

    Set与List区别: 两者都是接口,并继承Collection接口:List有序,允许重复:Set无序,不能重复: ArrayList与LinkList区别: ArrayList是动态数组,查询效率 ...

  7. 为什么说B+-tree比B 树更适合实际应用中操作系统的文件索引和数据库索引？

    B树: B+树 1) B+-tree的磁盘读写代价更低 B+-tree的内部结点并没有指向关键字具体信息的指针.因此其内部结点相对B 树更小.如果把所有同一内部结点的关键字存放在同一盘块中,那么盘块所 ...

  8. Laravel 5.2 教程 - 数据填充

    一.简介 Laravel提供的填充类(seed),可以让大家很容易的实现填充测试数据到数据库.所有的填充类都位于database/seeds目录.填充类的类名完全由你自定义,但最好还是遵循一定的规则, ...

  9. CF798 C. Mike and gcd problem

    /* CF798 C. Mike and gcd problem http://codeforces.com/contest/798/problem/C 数论 贪心 题意:如果一个数列的gcd值大于1 ...

  10. CSS3特效----制作立体导航栏菜单

    使用CSS3实现下图的导航菜单效果 <!doctype html> <html lang="en"> <head> <meta chars ...