<!DOCTYPE HTML>

<html>

<head>

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

<title>无标题文档</title>

<style>

ul{ width:328px;}

li{ width:100px; height:100px; border:1px #000 solid; float:left; margin-left:5px; list-style:none;}

.active{ background:red;}

</style>

<script src="jquery-1.11.1.js"></script>

<script>

$(function(){

    var iNow = 0;

    $('input').click(function(){

        var step = parseInt(Math.random() * 20 + 5);

        var timer = setInterval(function(){

            $('li').attr('class','');

            $('li').eq(iNow).attr('class','active');

            iNow++;

            step--;

            if(step==0){

                clearInterval(timer);

                alert( '您抽到了:' + $('li[class=active]').html() );

            }

            if(iNow == $('li').length){

                iNow = 0;

            }

        },100);

        $()

    });

});

</script>

</head>

<body>

<input type="button" value="抽奖">

<ul>

    <li>1等奖</li>

    <li>2等奖</li>

    <li>3等奖</li>

    <li>4等奖</li>

    <li>5等奖</li>

    <li>6等奖</li>

    <li>7等奖</li>

    <li>8等奖</li>

    <li>9等奖</li>

</ul>

</body>

</html>

jq 抽奖的更多相关文章

  1. jq 抽奖转盘

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

  2. JQ广告弹窗&随机抽奖————JQ

    1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <scri ...

  3. 一个好玩的jq+php实现转盘抽奖程序

    前台页面: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <met ...

  4. jq动画设置图片抽奖(修改效果版)

    效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...

  5. jq动画设置图片抽奖

    (因为自己是前端刚入门的小白所以中间出现很多问题,不过这对于我来说就是一次经验的积累) 预想效果:点击"开始",图片循环旋转,不是同时的效果,而是有一定的时间差.点击"开 ...

  6. jq demo 九宫格抽奖

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  7. jq转盘抽奖

    之前项目的时候要写一个抽奖,自己写了以后就记录一下. 先是html <div class="turntable_zhan"> <img class="y ...

  8. 抽奖JQ

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

  9. jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

    jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

随机推荐

  1. AcWing算法基础1.2

    排序 归并排序 归并排序和快速排序相反,快排是先排后分再合并,归并则是先分后排再合并 归并排序时间复杂度是O(n logn) 分析:    ------------------------------ ...

  2. ASP.NET MVC5 之 Log4Net 的学习和使用

    最近在学习 log4Net 插件,在博客园找到了好多资料,但是实现起来还是有点麻烦. 现在记录下学习的过程,期间可能加载着借鉴和转载的代码. 1.配置文件的设置: 新建config文件夹下 log4n ...

  3. ACM_绝对值排序

    Why Males And Females Apart? Time Limit: 2000/1000ms (Java/Others) Problem Description: In so many o ...

  4. Elasticsearch之Hadoop插件的安装（图文详解）

    这个Hadoop插件的安装是非常重要. Hadoop插件安装 在es的安装目录下 bin/plugin install elasticsearch/elasticsearch-repository-h ...

  5. android黑科技系列——解析公众号文章消息和链接文章消息自动打开原理

    一.辅助功能方案分析 关于WX的各种功能插件已经非常普遍了,而现在的插件都是依赖于Xposed框架进行的,所以个人觉得WX应该在这方便应对Xposed框架的使用防护,防止插件满天飞的现象,本文来介绍一 ...

  6. JS——arguments

    1.只在函数中使用 2.返回的是实参的数组 <script> getNum(1, 2);//(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ ...

  7. spring+spring MVC+mybatis 框架搭建

    1.新建一个javaWeb工程Test,创建时记得勾选web.xml文件. 2.导入需要的jar包,Mybatis所有的jar,spring所有的jar,mysql驱动包. 这里mybatis和spr ...

  8. Zabbix 客户端安装教程(第二篇)

    Zabbix 客户端安装教程 blog地址:http://www.cnblogs.com/caoguo [root@localhost ~]# yum install -y gcc make [roo ...

  9. CDR如何使用钢笔工具进行完美抠图?【6·18特惠倒计时！】

    不要以为抠图只能在图像处理软件中实现,矢量图形绘制软件CorelDRAW一样可以,而且方法很多,文章介绍使用CDR钢笔工具抠图的方法. 提示说明: 首先说明一下,CDR中的钢笔工具和其他平面设计软件中 ...

  10. Git学习总结三（工作区和暂存区、撤销修改）

    工作区和暂存区 工作区(Working Directory) 就是你在电脑里能看到的目录,比如我的learngit文件夹就是一个工作区: 版本库(Repository) 工作区有一个隐藏目录.git, ...