<!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 demo 九宫格抽奖的更多相关文章

  1. Js写九宫格抽奖

    国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...

  2. PHP+Ajax微信手机端九宫格抽奖实例

    PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...

  3. php+lottery.js制作九宫格抽奖实例

    php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...

  4. WebApp 九宫格抽奖简易demo

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...

  5. 【javascript】九宫格抽奖组件设计

    一些主要点 1. 转圈的顺序(顺时针或者逆时针): 2. 转圈的速率(从慢到快再到慢): 3. 位置的问题(下一次抽奖的起始位置是上一次抽奖的结束位置): 4. 转圈的圈数或者移动的次数. 基本原理 ...

  6. 九宫格抽奖HTML+JS版

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. JS：九宫格抽奖转盘实例

    工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示.可以用于取代一些flash抽奖程序. 机制说明: 1.通过定义lottery-unit来控制节点的个数及索引: 2.通过设置lottery ...

  8. 基于VUE的九宫格抽奖功能

    HTML代码: <template> <div class="luckDraw"> <title-bar :title="title&quo ...

  9. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. [openjudge-贪心]装箱问题

    题目描述 描述 一个工厂制造的产品形状都是长方体,它们的高度都是h,长和宽都相等,一共有六个型号,他们的长宽分别为1*1, 2*2, 3*3, 4*4, 5*5, 6*6.这些产品通常使用一个 6*6 ...

  2. vue 监听变量或对象

    注意:监听的对象必须已经在data中声明了 data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (va ...

  3. Flutter 控件之 Routes 和 Navigator. [PopupRoute]

    一个 App 通常会有多个界面,每个界面实现不同的功能,并在多个界面之间跳转.在 Flutter 中多个界面的跳转是通过 Navigator 来实现的. 在 Flutter 中定义了一个 Overla ...

  4. Python引用拷贝赋值

    先安利一个网站,对学习编程很有帮助:http://www.pythontutor.com/ 可以逐行可视化执行代码,具体自行体验啦 这个网站也是我在看别人的博文时候找到的,也先贴上别人的理解吧,我觉得 ...

  5. 解决apache httpd列出目录列表中文乱码问题

    问题: 找了好几个方法都不对, 很多都是说修改AddDefaultCharset字段的, 下面是新的方法, 新测可行 在httpd.conf下, 随便找个地方把下面这个字段扔上去, 重启即可 Inde ...

  6. day05数据类型，数字类型，字符串类型，字符串的操作方法，列表类型的操作方法，可变类型与不可变类型

    复习 ''' 流程控制 1.顺序结构.分支结构.循环结构 2.if分支结构 if 条件: 代码块 elif 条件: 代码块 else: 代码块 # 可以被if转换为False:0 | '' | Non ...

  7. Jenkins介绍和安装及配合GitLab代码自动部署

    Jenkins是什么? 基于JAVA的开源的自动化系统平台 加速自动化CI,CD任务及流水线,所有类型的任务:构建,测试,部署等 丰富的插件生态系统支持功能扩展,1400+插件和SCM,测试,通知,报 ...

  8. Windows Server 2008 R2 下载地址

    以下资源均来自微软 MSDN,是原汁原味的原版系统资源,值得系统爱好者收藏.以下多数链接是 ed2k 链接,推荐使用国外开源的 eMule 下载,亦可使用迅雷,但使用 eMule 更有利于共享资源. ...

  9. WebApi实现验证授权Token,WebApi生成文档等(转)

    using System; using System.Linq; using System.Web; using System.Web.Http; using System.Web.Security; ...

  10. Redis 队列好处

    Redis 队列好处 .降低流量高峰(并不是提升处理能力,系统的整体处理能力不变) .解除耦合(任务格式定好,各自演变,互不影响) .高可用(后台升级/崩溃完全不影响客户端的响应)