<!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. 月薪5K和月薪50K的程序员，差距都在哪里？

    毕业两年买房买车,BAT里拼杀年薪百万.这些大神级的传说想必大家都有耳闻. 而渴望成为人生赢家的程序员们也怀揣着这样梦想,纷纷踏入互联网的大门.   假以时日,这些人的差距愈发明显.最直观的就是薪资水 ...

  2. BZOJ 4530 LCT/线段树合并

    //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm> using nam ...

  3. ACM_他和她（最大生成树+最短路径）

    他和她 Time Limit: 2000/1000ms (Java/Others) Problem Description: 大二上学期刚过完,平时成绩不错的小V参加了一个小型编程比赛,遇到一道题,虽 ...

  4. linux命令(006) -- w

    w命令用于显示已经登陆系统的用户列表,并显示用户正在执行的指令.执行这个命令可得知目前登入系统的用户有那些人,以及他们正在执行的程序.单独执行w命令会显示所有的用户,您也可指定用户名称,仅显示某位用户 ...

  5. [转]linux之cut命令的用法

    转自:http://www.jb51.net/article/41872.htm cut是一个选取命令,就是将一段数据经过分析,取出我们想要的.一般来说,选取信息通常是针对“行”来进行分析的,并不是整 ...

  6. Hadoop Hive概念学习系列之hive里如何显示当前数据库及传参（十九）

    这个小知识点,看似简单,用处极大. $ hive --hiveconf hive.cli.print.current.db=true $ hive --hiveconf hive.cli.print. ...

  7. 阿里云虚拟主机针对恶意频繁攻击式访问造成CPU爆满的解决方法

    最近网站CPU经常爆满,到阿里云提交了工单,工程师给我的处理意见:   您好,虚拟主机CPU占用比较高通常这种情况有两种可能:   一是网站应用程序代码逻辑较复杂,或业务架构效率比较低,在请求了某个网 ...

  8. 前端开发之旅-zopim在线即时聊天客服

    一.与潜在客户实时聊天的神奇-zopim Zopim是一款高效的可嵌入网页中去的即使通讯与网站访客信息追踪的的Web软件.知道谁在访问您的网站吗?想和他们实时交流吗?想更有效的把握商机吗?使用Zopi ...

  9. JS——三个运用正则的方法

    trim().replace().search() <script> //trim();去除前后的空格 var str = " 你好 我很好! "; console.l ...

  10. JS——动态添加事件和移除事件（有待补充...）

    动态的添加事件:利用 attachEvent 和 addEventListener IE 支持 attachEvent: obj.attachEvent("onclick", Fo ...