<!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. 为什么入门首选C语言

    对于大部分程序员,C语言是学习编程的第一门语言,很少有不了解C的程序员. C语言除了能让你了解编程的相关概念,带你走进编程的大门,还能让你明白程序的运行原理,比如,计算机的各个部件是如何交互的,程序在 ...

  2. 解决CUDA driver version is insufficient for CUDA runtime version

    问题 在服务器上安装mxne的GPU版本 sudo pip install mxnet-cu80==1.2.1 然后在gpu上创建数据 import mxnet as mx mx.nd.array([ ...

  3. solr简单搜索案例

    solr简单搜索案例 使用Solr实现电商网站中商品信息搜索功能,可以根据关键字搜索商品信息,根据商品分类.价格过滤搜索结果,也可以根据价格进行排序,实现分页. 架构分为: 1. solr服务器 2. ...

  4. 收银台数据库存储AES加解密

    高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法加密和解密用到的密钥是相同的,这种加密方式加密速度非常快,适合经常发送数据的场合.缺点是密钥的传输 ...

  5. ili9325--LCD寄存器配置研究

    2011-06-22 22:18:12 自己根据ili9325的规格书编写驱动.发现LCD屏没显示.于是怀疑是某些寄存器设置错误.要调试的话最好还是先熟悉寄存器的作用,调试的时候只要看到现象就能分析了 ...

  6. BDD数据集（mask_rcnn）1

    mask_rcnn中ballon的例子 classsification VS semantic segmention VS object detection VS instance segmentio ...

  7. nginx-高并发配置 第七章

    一 .nginx 服务配置优化: 1.nginx进程数,建议按照cpu数目来指定,一般为它的倍数.worker_processes 定义了nginx对外提供web服务时的worker进程数.最优值取决 ...

  8. 2019年1月6日 没有nainai吃 习题1

    1列举布尔值是False的所有值 0,False,'',[],{},(),None 2根据范围获取其中3和7整除的所有数的和,并返回调用者:符合条件的数字个数以及符合条件的数字的总和 def func ...

  9. JS求任意字符串中出现最多的字符以及出现的次数

    我爱撸码,撸码使我感到快乐!大家好,我是Counter本节讲讲如何利用JS来查找任意给定的字符串,求字符串中出现次数最多的字符,出现的次数.直接上代码了,该注释的都注释啦.非常轻松加愉快.效果如下: ...

  10. Win32汇编学习(11)：对话框(2)

    我们将进一步学习对话框,探讨如何把对话框当成输入设备.如果您看了前一篇文章,那就会发现这次的例子只有少量的改动,就是把我们的对话框窗口附属到主窗口上.另外,我们还要学习通用对话框的用法. 理论: 把对 ...