<!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. [Swift通天遁地]三、手势与图表-(3)通过捏合手势放大和缩小图像视图

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. C语言过时了？为什么还要推荐每一位程序员都来学一下C语言？

    互联网蓬勃发展的时代,有一类人做出了巨大的贡献,这一群人被大家称之为程序员,怎样才能成为一名优秀的程序员呢,为什么每一个程序员都需要学习C语言呢? 就让我来跟大家分享分享:   在学习C/C++或者想 ...

  3. dynamic_cast 与 typeid

    C++中的类型转换分为两种: 隐式类型转换: 显式类型转换. 隐式类型转换一般都是不经意间就发生了,比如int + float 时,int就被隐式的转换为float类型了. 显示类型转换包括四种方式: ...

  4. ios9-NSLayoutAnchor和UILayoutGuide实现自动布局

    @interface ViewController () { NSLayoutConstraint *yellowViewTopConstraint; NSLayoutConstraint *blue ...

  5. [ AHOI 2008 ] Meet

    \(\\\) \(Description\) 一棵\(N\)个节点的树,每条边权都为\(1\). \(M\)组询问,每次给出三个点\(A_i,B_i,C_i\),求从三个点分别出发,移动到同一个点的路 ...

  6. CF831C Jury Marks

    思路: 关键在于“插入”一个得分之后,其他所有得分也随之确定了. 实现: #include <iostream> #include <cstdio> #include < ...

  7. JS压缩图片（canvas），返回base64码

    上传图片时总会遇到图片过大上传不上去的问题,本方法是在网上搜的压缩图片的例子,我测试过了,确实能用,但是照搬别人的代码,发现压缩后图片会失真,不清晰,现经修改图片清晰度还可以,不仔细看差别不大,so, ...

  8. atom 插件安装【转载】

    http://www.cnblogs.com/20145221GQ/p/5334762.html 问题: 输入apm install后,可能一直没有响应,要强行退. 不知道安装的时候可不可以打开ato ...

  9. more

    参数选项: -num 指定屏幕显示大小为num行. +num 从行号num开始显示. -s 把连续多个空行显示为一行. -p 不滚屏,而是清除整个屏幕,然后显示文本. -c 不滚屏,而是从每一屏的顶部 ...

  10. （转）Quartz任务调度(1)概念例析快速入门

    http://blog.csdn.net/qwe6112071/article/details/50991563 Quartz框架需求引入 在现实开发中,我们常常会遇到需要系统在特定时刻完成特定任务的 ...