<!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. html 数字不转行问题

    代码如下 <div style="width:20px;height:20px"> 111111111111111111111111111111111111111111 ...

  2. HTML基础的基础

    今天咱们来看一下有关HTML的相关基础内容 学过.net的对HTML不会陌生 但是对于想单纯的了解下HTML的可能对他不是很了解 男的可以这么理解HTML=How To Make Love 咳咳,请上 ...

  3. A GDI+ Based Character LCD Control

    This is a renew. A GDI+ Based Character LCD Control by Conmajia Character liquid crystal display (LC ...

  4. QT链接数据库

    在介绍QT与数据的链接问题上,我在这里就不介绍关于QT环境与mysql.sqlite3环境的安装步骤了,以下的所有的操作都是建立在你已经安装了所有环境的基础上的.好的,那我们就具体来看一看QT环境中怎 ...

  5. websocket技术分享

    开发环境: spring3+tomcat7+spring-websocket4 运行环境: windows.Linux 一.背景: 产品将要发布的消息或其他需要让客户提前知道的消息,在客户端和服务端建 ...

  6. 仿：Android - 微信 - 朋友圈 - 小视频播放，多 4 句废话算我输

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  7. 分针网——每日分享： jquery选择器的用法

    jQuery选择器是jQuery库的一大特色,用这些选择器不但可以省去繁琐的JavaScript 书写方式,还可以节省时间和效率,正是有这些jQuery选择器,才让我们更容易的操作JavaScript ...

  8. UISement属性

    .segmentedControlStyle 设置segment的显示样式. typedef NS_ENUM(NSInteger, UISegmentedControlStyle) { UISegme ...

  9. eclipse简介及下载

    一.Eclipse 是非常着名的跨平台的自由集成开发环境(IDE).最初主要用来Java语言开发,但是目前亦有人通过插件使其作为其他计算机语言比如C++和Python的开发工具. 二.Eclipse的 ...

  10. opencv探索之路（一）：win10 X64+VS2015+opencv3.10安装教程

    我的电脑64位Win10系统,现在利用VS2015安装opencv3.10.安装之路颇为艰辛,从一开始的VS2015的安装,到opencv的安装,都充满挑战,历经千辛万苦终于把opencv开发环境搭建 ...