<!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. word之常用功能

    0.word区域:标题栏.快速访问工具栏.功能区.功能按钮.导航窗口.编辑区.水平垂直滑动条.状态栏 1.更改office主题.文件---帐户---office主题.(传统白色.浅灰色.深灰色) 2. ...

  2. CentOS 7 使用SVN+Apache搭建版本控制服务器

    svn简介 Subversion是一个免费/开源的版本控制系统, Subversion 可以跨越时间地对文件和目录, 以及它们的修改进行管理. 这就允许你恢复 数据的旧版本, 或检查数据的修改历史. ...

  3. Spring Cloud配置中心（Config）

    Spring Cloud配置中心(Config) Spring Cloud是现在流行的分布式服务框架,它提供了很多有用的组件.比如:配置中心.Eureka服务发现. 消息总线.熔断机制等. 配置中心在 ...

  4. WebForm母版页

    母版页:可以把界面的部分代码进行重用 添加新项-母版页 在母版页中界面代码不要写在 <asp:ContentPlaceHolder ID="head" runat=" ...

  5. 初入MEF-IOC导入导出

    DDD,领域驱动开发,听起来高端大气,这本书买回来翻了几下,实在是晦涩难懂

  6. springmvc sessionfilter 登录过滤器

    1.在web.xml中配置 <!-- sessionfilter --> <filter> <filter-name>sessionFilter</filte ...

  7. nodejs cannot find module 'mysql' 问题分析

    在windows平台下,测试nodejs连接mysql数据库. 首先 在控制台中安装mysql依赖包 npm install mysql 安装成功后,mysql依赖包可以在User目录中的node_m ...

  8. Centos7 升级 Ruby

    Centos7通过yum 安装的Ruby 是2.0版本.版本较低,需要升级到2.5以上版本. #yum 安装ruby yum install ruby #查看ruby版本 ruby -v 以下开始升级 ...

  9. Python爬虫——你们要的王者荣耀高清图

    曾经144区的王者 学了计算机后 头发逐渐从李白变成了达摩 秀发有何用,变秃亦变强 (emmm徒弟说李白比达摩强,变秃不一定变强) 前言 前几天开了农药的安装包,发现农药是.Net实现的游戏 虽然游戏 ...

  10. 主从复制跳过错误(未采用GTID)

    DB:5.6.15 主从库没有采用GTID 案例1:从库对象不存在mysql> show slave status \G;*************************** 1. row * ...