<!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. JavaScript中.和[]有什么区别？

    .与[]都可以用于读取或修改对象属性. <script> var myData={ name:"Adam", weather:"sunny", }; ...

  2. POJ 3855 计算几何·多边形重心

    思路: 多边形面积->任选一个点,把多边形拆成三角,叉积一下 三角形重心->(x1+x2+x3)/3,(y1+y2+y3)/3 多边形重心公式题目中有,套一下就好了 计算多边形重心方法: ...

  3. 题解报告：poj 3070 Fibonacci

    题目链接:http://poj.org/problem?id=3070 Description In the Fibonacci integer sequence, F0 = 0, F1 = 1, a ...

  4. day03_12/13/2016_bean属性的设置之setter方法注入

  5. Elasticsearch之CURL命令的UPDATE

    对于,Elasticsearch之CURL命令的UPDATE包括局部更新和全部更新.可以去看我写的另一篇博客. Elasticsearch之更新(全部更新和局部更新) 总结: ES全部更新,使用PUT ...

  6. Elasticsearch之CURL命令的PUT和POST对比

    PUT是幂等方法,而POST并不是. PUT用于更新操作,POST用于新增操作比较合适. PUT,DELETE操作是幂等的,所谓幂等就是指不管进行多少次操作,结果都一样. 比如,我用PUT修改一篇文章 ...

  7. Jquery和Ajax的关系！

    Jquery是一种JavaScript框架,而Ajax(Asynchronous JavaScript and XML)是异步JavaScript和XML. Jquery是JavaScript的框架, ...

  8. Python--10、生产者消费者模型

    生产者消费者模型(★) 平衡生产线程和消费线程的工作能力来提高程序的整体处理数据的速度.程序中有两类角色:生产数据.消费数据实现方式:生产->队列->消费. 通过一个容器来解决生产者和消费 ...

  9. ArcGIS Android工程迁移到其他电脑不能打开的问题

    问题描述:当我把已经做好的ArcGIS Android工程想在其他电脑运行时,总是会提示报错.而报错的地方,正是出现在下面这条语句上. compile 'com.esri.arcgisruntime: ...

  10. 微信自定义分享功能实现Tips

    以MVC为例 前台js通过.post()方法传给后台特定Controller当前页面的url,后台获取后,进行处理: 1.获取access_token:https://mp.weixin.qq.com ...