<!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设计模式系列-Aggregate模式

    所谓的Aggregate模式,其实就是聚合模式,跟masterWorker模式有点类似,但其出发点不同.masterWorker模式是指master向worker发送命令,worker完成某种业务逻辑 ...

  2. Android 图片异步加载 加载网络图片

    最近用到了加载网络图片,研究了一下,写一点简单的介绍: 首先创建一个线程去取图片(网络请求必须放在线程中): /** * 使用继承java.lang.Thread类的方式创建一个线程 * 直接取图片, ...

  3. Java笔记整理列表

    整理Java相关知识点. 2018-11-20 1:Java入门学习 2:Java进阶

  4. MYSQL数据库迁移到ORACLE数据库

    一.环境和需求1.环境 MySQL数据库服务器: OS version:Linux 5.3 for 64 bit mysql Server version: 5.0.45 Oracle数据库服务器: ...

  5. if({1,0}, , )

    =VLOOKUP(F2,IF({1,0},D2:D10,C2:C10),2,),用F2作为查找条件,对D列进行查找,如果改成{0,1}则是对C列为查找范围.返回内存数组,对F2进行精确查找. 为什么写 ...

  6. 多目标跟踪笔记二：Efficient Algorithms for Finding the K Best Paths Through a Trellis

    Abstract 本文提出了一种新的方法来寻找不相交k最优路径.最坏情况下计算复杂度为N3log(N).该方法比WVD算法(https://www.cnblogs.com/walker-lin/p/1 ...

  7. mysql跟java时间类型转换

    参照这个就行了,这个对应注入类型.===========java注入数据库==========java类型 mysql类型 成功与否date date yesdate time nodate time ...

  8. 转载：python 日期，季度，年份

    # 这个data_matrix[:,dimen] <= thresh_val 内标会返回data_matrix当中的值符合条件的,返回为True # ret_array 中就会返回 下标为Tru ...

  9. Python学习【第6篇】：Python之常用模块1

    常用模块一. collocations 模块 时间模块 random模块 os模块 sys模块 序列化模块 re模块 常用模块二:这些模块和面向对象有关 hashlib模块 configparse模块 ...

  10. 原型&&原型链一语道破梦中人

    一直对原型和原型链模模糊糊,今天看到一句话,通过这句话再结合我目前对原型和原型链的理解算是让我对原型和原型链有一个更清醒的认识;并且记忆更加深刻; 任何一个对象都有一个隐式原型:__proto__属性 ...