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 ...
随机推荐
- 笔记-ASP.NET WebApi
本文是针对ASP.NET WepApi 2 的笔记. Web API 可返回的结果: 1.void 2.HttpResponseMessage 3.IHttpActionResult 4.其他类型 返 ...
- ssh防止暴力破解之fail2ban
1.利用sshd服务本身防止暴力破解 2.sshd服务防止暴力破解和fail2ban使用方法 先说说一般的防范措施: 方法1: 1.密码足够复杂: 密码的长度要大于8位最好大于14位.密码的复杂度是密 ...
- SD卡与FAT32系统学习
2011-06-06 23:04 前2天,我了解了一下SD卡驱动的原理及FAT32文件系统的结构.接着准备主要已移植为主.通过LCD显示SD卡中的图片.但我需要分步进行. 0,使sd卡能读写数据.1, ...
- phpstudy 安装 Apcahe SSL证书 实现https连接
摘自:https://jingyan.baidu.com/article/64d05a022e6b57de54f73b51.html Windows phpstudy安装ssl证书教程. 工具/原料 ...
- SolrJ的入门
什么是SolrJ? solrj是访问solr服务的java客户端,提供索引和搜索的请求方法, SolrJ和图形界面操作的区别就类似于数据库中使用jdbc和mysql客户端的区别一样. 我在测试Solr ...
- PHP防止网页快速刷新+代理ip访问
前几天网站收到了一些CC攻击,比较郁闷...这里分享一下,防止网页自动刷新的方法以及阻止代理IP访问网站的方法,代码是分开的,两个功能,需要那个用那个,可以自定义时间间隔,这个代码不止可以防CC攻击, ...
- D6差分及树上差分
原谅我这篇博客拖了很久才写: 来到学校就和白痴一样缺了一世纪的课 上课特别懵:还有开学考枯了: 差分有列的差分,对于一段区间[l,r]进行修改,显然如果我们对于他的差分数组的l和r+1进行修改就可以了 ...
- topcoder srm 595 div1
problem1 link 判断最后剩下哪些区间没有被其他区间覆盖. problem2 link 假设$b$的位置固定,那么不同的$a$会使得$[a,b]$有两种情况,第一种,$[a,b]$ is n ...
- Spring 学习——Spring注解——Autowiring(自动装配)
装配方式 方式一:默认 方式二:byName:根据属性名称自动装配.会查找Bean容器内部所有初始化的与属性名成相同的Bean,自动装配.(需要通过set方法注入,注入Bean的id名称需要和实体类的 ...
- QuerySet API
模型objects:这个对象是 django.db.model.manager.Manger 的对象,这个类是一个空壳类,它上面的所有方法都是从 QuerySet 这个类中拷贝过来的. >> ...