<!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源码分析-Remote-收消息

    上一遍博客中,我们分析了网络链接建立的过程,一旦建立就可以正常的收发消息了.发送消息的细节不再分析,因为对于本地的actor来说这个过程相对简单,它只是创立链接然后给指定的netty网路服务发送消息就 ...

  2. python自动化测试学习笔记-2-列表

    上次我们学习了python的基本概念,了解了python的变量及数据类型,并实战了条件判断,for/while循环,字符串输出,格式化输出的一些基本用法,接下来我们继续学习其他的一些数据类型. pyt ...

  3. HDU4340 Capturing a country DP

    自己原来写的两个维度的DP有错,看了半天这个大牛的blog.http://blog.csdn.net/cyberzhg/article/details/7840922 题意:A军队和B军队要一起占领一 ...

  4. PHP网站 通过js方式判断是否是手机访问，若是 跳转到手机版网址！

    <script type="text/javascript" src="http://i3.dukuai.com/ui/js/jquery-1.32pack.js& ...

  5. 题解报告：hdu 1028 Ignatius and the Princess III（母函数or计数DP）

    Problem Description "Well, it seems the first problem is too easy. I will let you know how fool ...

  6. Sqoop 产生背景（一）

    Sqoop 的产生主要源于: 1.目前很多使用hadoop技术的企业,有大量的数据存储在传统关系型数据库中. 2.早期由于工具的缺乏,hadoop与传统数据库之间的数据传输非常困难. 1)传统数据库中 ...

  7. 入门开发工具idea常见问题之选项中没有servlet

    1.在maven中如果创建不了servlet,在project Setting旁边的添加一个web选项,就可以创建servlet了. 初次接触这个陌生的工具还是不太好弄.

  8. Python学习（一）-在VS上搭建开发环境

    1.到官网下载最新Python 注意:虽然目前大部分应用是Python2写的,但Python3必定会成为以后的主流 不管选择学习哪个,了解pyhton2和pyhton3的差异是必须的 2.安装Pyth ...

  9. SpringBoot 搭建

    1.使用Eclipse 建立Maven项目(webapp OR quickstart) 2.配置Maven,如下: <parent> <groupId>org.springfr ...

  10. Java_Web三大框架之Hibernate增删改查

    下面介绍一下Hibernate的增删改查. 第一步:编写用户实体类以及User.hbm.xml映射 package com.msl.entity; public class User { privat ...