<!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. Akka源码分析-Cluster-ActorSystem

    前面几篇博客,我们依次介绍了local和remote的一些内容,其实再分析cluster就会简单很多,后面关于cluster的源码分析,能够省略的地方,就不再贴源码而是一句话带过了,如果有不理解的地方 ...

  2. tomcat解决 java.lang.IllegalArgumentException: Request header is too large

    tomcat运行项目时,有一个请求过去后,后台报这样的错java.lang.IllegalArgumentException: Request header is too large 原因:请求头超过 ...

  3. ACM_巧克力

    Chocolate,Chocolate Time Limit: 2000/1000ms (Java/Others) Problem Description: 都说发神喜欢吃巧克力,有一次发神徒弟买了一 ...

  4. oracle 行转列函数pivot和unpivot

    今天接到业务部门的一个需求,需要对同一公司的不同财务指标进行排序,需要用到oracle的行转列函数unpivot. 财务报表的表结构为: 要实现业务部门的排序筛选功能,需要首先将行数据转为列数据: 使 ...

  5. mybatis中打印sql语句

    在mybatis-config.xml中properties节点下,配置一个settings节点 <settings> <setting name="cacheEnable ...

  6. 软件图标显示不正常【win7企业版】

    现象: 原因: 图标缓存没有把该软件图标建立起来 解决: 一. 1.找到 IconCache.db 2.你要把电脑隐藏文件打开不然找不到这个文件的,组织—文件夹及搜索选项——查看——显示隐藏文件.文件 ...

  7. [ BZOJ 2134 ] 单选错位

    \(\\\) \(Description\) 一共\(N​\)道题目,第\(i​\)道题有\(A_i​\)个选项,现在有一个人做完了所有题目,但将每一道题的答案都写到了下一道题的位置\((​\)第\( ...

  8. P2639 [USACO09OCT]Bessie的体重问题Bessie's We…

    题目描述 Bessie像她的诸多姊妹一样,因为从Farmer John的草地吃了太多美味的草而长出了太多的赘肉.所以FJ将她置于一个及其严格的节食计划之中.她每天不能吃多过H (5 <= H & ...

  9. 图解TCP/IP笔记（3）——IP协议

    目录 IP协议 IP寻址 IP地址组成 IP地址分类 广播地址 子网掩码 全局地址和私有地址 IP协议 跨越不同数据链路,实现两端节点之间的数据包传输 数据链路:只负责某一个区间之间的通信传输 IP协 ...

  10. [Android]有关外部链接唤醒App需要注意的坑

    移动互联网发展到今天,一个移动app需要和各种各样的外部链接关联,它不再仅仅从手机的桌面启动,更多的将会从其他的应用.浏览器链接.短信.二维码或者微信分享等渠道启动,这里涉及到的是各种各样的营销渠道和 ...