<!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. Unity 学习Json篇

    介绍 JSON是一个简单的,但功能强大的序列化数据格式.它定义了简单的类型,如布尔,数(int和float)和字符串,和几个数据结构:list和dictionnary.可以在http://JSON.o ...

  2. 在Oracle中添加用户登录名称

    第一步,打开Oracle客户端单击 “帮助”-->"支持信息"-->”TNS名“,加入红色部分.页面如下: 第二步,再次打开Oracle客户端时,就会显示数据库了,只需 ...

  3. 《分布式Java应用之基础与实践》读书笔记二

    远程调用方式就是尽可能地使系统间的通信和系统内一样,让使用者感觉调用远程同调用本地一样,但其实没没有办法做到完全透明,例如由于远程调用带来的网络问题.超时问题.序列化/反序列化问题.调式复杂的问题等. ...

  4. commitProperties方法

    自定义的组件,如果重写commitProperties方法,那么在该方法内部一定要注意super.commitProperties()的调用.

  5. QuartusII13.0使用教程详解（一个完整的工程建立）

    好久都没有发布自己的博客了,因为最近学校有比赛,从参加到现在都是一脸懵逼,幸亏有bingo大神的教程,让我慢慢走上了VIP之旅,bingo大神的无私奉献精神值得我们每一个业界人士学习,向bingo致敬 ...

  6. 微软的STRIDE模型

    微软的STRIDE模型: https://msdn.microsoft.com/en-us/library/ee823878(v=cs.20).aspx Spoofing identity. An e ...

  7. 【算法系列学习】Dijkstra求最短路 [kuangbin带你飞]专题四 最短路练习 D - Silver Cow Party

    https://vjudge.net/contest/66569#problem/D trick:1~N各点到X可以通过转置变为X到1~N各点 #include<iostream> #in ...

  8. 阿里云CentOS7.2服务器的安装

    第一步:下载服务器系统ISO安装文件 我使用的是阿里云的镜像:因为阿里云的服务在国内相对比较成熟 服务器镜像下载如下:http://mirrors.aliyun.com/centos/7/isos/x ...

  9. 原生JS-----论数据类型检测

    常见的数据类型检测的方法: 一.最为基础的typeof 二.不可不知的instanceof 三.比instanceof更好的constructor 四.检测值或者表达式的结果是否为NaN 五.易用的j ...

  10. C#集合之有序列表

    如果需要基于键对所需集合排序,就可以使用SortedList<TKey,TValue>类.这个类按照键给元素排序.这个集合中的值和键都可以使用任何类型.定义为键的自定义类型需要实现ICom ...