jq demo 九宫格抽奖
<!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 九宫格抽奖的更多相关文章
- Js写九宫格抽奖
国庆出去转了一圈,回来及时把以前写的一些有用的在这儿记录一下 --------------------------------------------我是分割线-------------------- ...
- PHP+Ajax微信手机端九宫格抽奖实例
PHP+Ajax结合lottery.js制作的一款微信手机端九宫格抽奖实例,抽奖完成后有收货地址添加表单出现.支持可以设置中奖概率等. 奖品列表 <div class="lottery ...
- php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...
- WebApp 九宫格抽奖简易demo
代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <met ...
- 【javascript】九宫格抽奖组件设计
一些主要点 1. 转圈的顺序(顺时针或者逆时针): 2. 转圈的速率(从慢到快再到慢): 3. 位置的问题(下一次抽奖的起始位置是上一次抽奖的结束位置): 4. 转圈的圈数或者移动的次数. 基本原理 ...
- 九宫格抽奖HTML+JS版
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- JS：九宫格抽奖转盘实例
工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示.可以用于取代一些flash抽奖程序. 机制说明: 1.通过定义lottery-unit来控制节点的个数及索引: 2.通过设置lottery ...
- 基于VUE的九宫格抽奖功能
HTML代码: <template> <div class="luckDraw"> <title-bar :title="title&quo ...
- jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- js-input框中写入的小写小写字母全部转换成大写字母的js代码
<input type="text" id="blinitials" name="blinitials" onkeyup=" ...
- 安装win10 和win中的一些杂项问题
reg中的 policies是政策/策略, 主要是指 控制面板中的一些控制项目, 其中 explorer是 控制面板的 显示项目... DWORD值是一个32位(4个字节:即双字)长度的数值, 是数字 ...
- FASM学习中的一些表格
Size operator Registers Data directives Conditions(jmp助记符)
- Excel 表格查找重复数据，去重复统计
找出表格是否有重复数据: =IF(AND(G20=G19,D20=D19),"是","否") 筛选移除[重复的数据]然后开始统计 =SUBTOTAL(9,E2: ...
- jackson中@JsonProperty、@JsonIgnore等常用注解总结
本文为博主原创,未经允许不得转载: 最近用的比较多,把json相关的知识点都总结一下,jackjson的注解使用比较频繁, jackson的maven依赖 <dependency> < ...
- JavaScript形而上的单例模式
什么是单例模式? 单例模式是指,类多次实例化返回的对象是同一个. 反例 var tt = function(name){ this.name = name; }; var t1 = new tt('t ...
- el-checkbox遇到的问题
在官网中有实例 <template> <el-checkbox :indeterminate="isIndeterminate" v-model="ch ...
- Spring中 @Autowired标签与 @Resource标签
spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. @Autowired ...
- 网络3-Jsonp
解决跨域问题的几种办法 1.Flash (不做讨论) 2.服务器代理中转 3.Jsonp 4.document.domain(针对基础域名相同的情况)bj.58.com document.domain ...
- Hibernate注意项
Hibernate实体规则 1.持久化类提供无参数构造 2.成员变量私有,提供getset访问,提供实行 3.持久化类属性,尽量使用包装类型 4.持久化类需要提供oid与数据库中的主键列对应 5.不要 ...