<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

div{

    margin: 100px auto 0px; // 居中

    width:500px;

    height:250px;

    border:3px solid black; // 边框

}

li{

    width:129px;

    height:59px;

    border:3px solid  black;

    float:left;   // 向左浮动

    margin:8px 0 0 8px; // 设置图片间的间距

    list-style:none;

}

.btn{

     border:3px solid blue;  // 设置为红色边框

    cursor:pointer;        // 设置光标类型为指针

}

.cur{

     border:3px solid red;  // 设置为红色边框

}

</style>

<title>zhuanpan</title>

</head>

<body>

    <div>

        <ul>

            <li id="c1">1</li>

            <li id="c2">2</li>

            <li id="c3">3</li>

            <li id="c8">谢谢参与</li>

            <li class="btn" onclick="run();">点击抽奖</li>

            <li id="c4">1</li>

            <li id="c7">2</li>

            <li id="c61">3</li>

            <li id="c51">谢谢参与</li>

        </ul>

    </div>

</body>

</html>

<script type="text/javascript" src="http://www.jiurong.com/public/2014_2/js/jquery.min.js?v=1.5.5.8.27"></script>

<script type="text/javascript">

// 整个转动过程所需的步骤

var step = [

['c1',0],    // 第一个元素特殊设置

['c1', 500],

['c2', 100],

['c3', 300],

['c4', 200],

['c5', 200],

['c6', 200],

['c7', 200],

['c8', 200],

['c1', 100],

['c2', 100],

['c3', 100],

['c4', 100],

['c5', 100],

['c6', 100],

['c7', 100],

['c8', 100],

['c1', 100],

['c2', 100],

['c3', 100],

['c4', 100],

['c5', 100],

['c6', 100],

['c7', 100],

['c8', 100],

['c1', 100],

['c2', 100],

['c3', 100],

['c4', 100],

['c5', 100],

['c6', 100],

['c7', 100],

['c8', 100],

['c1', 100],

['c2', 200],

['c3', 300],

['c4', 300],

['c5', 300],

['c6', 300],

['c7', 300],

['c8', 300],

['c1', 400],

['c2', 400],

['c3', 400],

['c4', 400],

['c5', 400],

['c6', 400],

['c7', 400],

['c8', 400]

];

// 记录当前步数，即step数组的下标

var current = 1;

// 设置样式和重新设置定时器

function run(){

    // 删除之前设置的cur类

    $('#'+step[current-1][0]).removeClass('cur');

    // 为当前元素设置cur类

    $('#'+step[current][0]).addClass('cur');

    // 判断step数组所有步骤是否已经走完

    if(current == step.length - 1){  

        alert(step[current][0]);

        window.location.reload();

    }else{

        // 重新设置定时器

        setTimeout('run()', step[current][1]);

        current++;

    }

}

</script>

九宫格抽奖HTML+JS版的更多相关文章

  1. Js写九宫格抽奖

    国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...

  2. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  3. PHP+Ajax微信手机端九宫格抽奖实例

    PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...

  4. Twitter面试题蓄水池蓄水量算法(原创 JS版，以后可能会补上C#的)

    之前在群里有人讨论Twitter的面试题,蓄水池蓄水量计算,于是自己写了个JS版的(PS:主要后台代码还要编译,想想还是JS快,于是就使用了JS了.不过算法主要还是思路嘛,而且JS应该都没问题吧^_^ ...

  5. 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  6. 团购、定时抢购倒计时js版

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org ...

  7. JS版百度地图API

    地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...

  8. PureMVC(JS版）源码解析：总结

    PureMVC源码中设计到的11个类已经全部解析完了,回首想想,花了一周的时间做的这点事情还是挺值得的,自己的文字组织表达能力和对pureMVC的理解也在写博客的过程中得到了些提升.我也是第一次写系列 ...

  9. 常见排序算法（JS版）

    常见排序算法(JS版)包括: 内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归 & 堆栈),归并排序,堆排序,以及分析每种排序算法的执行时间. index.html <! ...

随机推荐

  1. css3动画属性(transitions:property duration timing transition-delay)

    transitions:property duration timing-function; transitionst他有三个参数:1) property:属性设置,例如background,colo ...

  2. 『TCP/IP详解——卷一：协议』读书笔记——02

    2013-08-16 20:07:11 1.3 TCP/IP的分层 这是一个很好的图,要多看!!图上有些细节会在今后的笔记中提到,看不懂不必深究. IP是网络层上的主要协议,同时被TCP和UDP(这两 ...

  3. NoSQL学习一：MongoDB下载与安装

    MongoDB是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的.他支持的数据结构非常松散,是类似json的bjson格式,因此可以存储比较复杂的数据类型.M ...

  4. ArcMap 连接SDE 出错“Failed to connect to the specified server. Entry for SDE instance no found in services file.”

    问题描述 环境: ARCMAP 10.0 ARCSDE FOR ORACLE 10.0   在通过用ArcMap 连接ORACLE SDE时出现上面的错.   解决方式 在 C:\Windows\Sy ...

  5. JsCss笔记

    1.  &= 不应该在 Bool 型变量中使用. a &= b  对于Js来说是:  a = a & b ;  a 本来是 bool , &= 之后就变成了 Int. ...

  6. Python爬虫 -- 抓取电影天堂8分以上电影

    看了几天的python语法,还是应该写个东西练练手.刚好假期里面看电影,找不到很好的影片,于是有个想法,何不搞个爬虫把电影天堂里面8分以上的电影爬出来.做完花了两三个小时,撸了这么一个程序.反正蛮简单 ...

  7. 2.利用NABCD模型进行竞争性需求分析

    1) N (Need 需求) 在宿舍里,舍友下载了一个比较好玩的游戏,一块好看的电影或者共享一个大体积的文件,而你又不想去重新下载,于是乎:‘’哎,win8怎么共享?‘’,‘’我的网上邻居怎么看不到你 ...

  8. git删除push到远程服务器的commit

    如果不小心把不该提交的代码或者敏感的数据(如密码)提交到远程git服务器上,可以使用git reset回滚到上一个commit,并且commit history不留下任何痕迹. 具体做法: # 1.通 ...

  9. 只有好的棋手才会走运-《打造Facebook》读后感

    王淮的<打造Facebook>一书不厚,花半天时间轻松读完.书中没有大段的说教,只有近乎流水的陈述.正如作者所说,打造Facebook这本书由巴克伯格来写再合适不过.可惜他至少在近几年内没 ...

  10. JETTY嵌入式Web容器的开发

    JETTY嵌入式Web容器的开发 JETTY嵌入式Web容器体积小,启动速度快,性能好,免费开源,是一款很适合开发调试和简单演示的轻量级Web容器. 而且它的嵌入式的特点,使得开发者可以直接将容器的操 ...