<!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. 安装OpenResty开发环境

    OpenResty是一个基于 Nginx 与 Lua 的高性能 Web 平台,其内部集成了大量精良的 Lua 库.第三方模块以及大多数的依赖项.用于方便地搭建能够处理超高并发.扩展性极高的动态 Web ...

  2. CRT/LCD/VGA Information and Timing

    彩色阴极射线管的剖面图: 1. 电子QIANG Three Electron guns (for red, green, and blue phosphor dots)2. 电子束 Electron ...

  3. sublime package control INSTALLATION

    Simple The simplest method of installation is through the Sublime Text console. The console is acces ...

  4. php 固定红包 + 随机红包算法

    <?php /** * 随机红包+固定红包算法[策略模式] * copyright (c) 2016 http://blog.csdn.net/CleverCode */ //配置传输数据DTO ...

  5. Linux 系统最大TCP连接数 调优

    Linux系统TCP最大连接数 Linux系统可接连接到最大的TCP连接数,高并发情况下可进行扩展加大,最大为65536. 限制最大TCP连接数 修改文件:/etc/sysctl.conf 生效命令: ...

  6. 使用pm2-zabbix监控node工程

    环境 centos 7 zabbix 3.2.6 node 4.4.3 安装 # wget http://repo.zabbix.com/zabbix/3.2/rhel/7/x86_64/zabbix ...

  7. kvm键盘使用

    在新建导向的时候最后一步之前,选择查看细节那里,在desplay的地方选择VNC server ,再在keyboard地方选择us-en,这下进入安装界面就可以了.

  8. CodeForces 518E Arthur and Questions（贪心 + 思维）题解

    题意:给你a1~an,k,要求a1 + ... + ak < a2 + .... + ak+1 < a3 + ... + ak+2 <...,然后这里的ai有可能是?,要求你填?的数 ...

  9. python from entry to abandon3

    第十章的内容是解决问题————编写一个Python脚本.在我的电脑上因为Zip命令不能正常工作所以无法给出演示.该章给出了很有意义的编程思路,对以后学习和工作都有不错的参考意义,这部分有兴趣的同学还是 ...

  10. (转载)Unity学习笔记：关于Dropdown的学习

    今天组长让我写一个界面,其中用到了下拉条,我的印象还停留在以前的NGUI有现成的组件,但是uGUI没有的那阶段,组长跟我说uGUI现在也有了,研究了一下,发现real方便哦,今天就来简单说一下用法吧. ...