jq 抽奖
<!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 抽奖的更多相关文章
- jq 抽奖转盘
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JQ广告弹窗&随机抽奖————JQ
1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <scri ...
- 一个好玩的jq+php实现转盘抽奖程序
前台页面: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <met ...
- jq动画设置图片抽奖(修改效果版)
效果:点击开始,图片转动,按钮显示"停止",点击停止,选出中奖号码,,最后一个数字停止时,按钮变为"again",点击"again"开始转动 ...
- jq动画设置图片抽奖
(因为自己是前端刚入门的小白所以中间出现很多问题,不过这对于我来说就是一次经验的积累) 预想效果:点击"开始",图片循环旋转,不是同时的效果,而是有一定的时间差.点击"开 ...
- jq demo 九宫格抽奖
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- jq转盘抽奖
之前项目的时候要写一个抽奖,自己写了以后就记录一下. 先是html <div class="turntable_zhan"> <img class="y ...
- 抽奖JQ
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现
jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现 在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
随机推荐
- [Swift通天遁地]四、网络和线程-(3)线程组:使用DispatchGroup(调度组)对线程进行分组管理
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- win快速搜索软件
Everything 与其他搜索工具的简单比较: Everything 是至今为止 X-Force 所使用过速度最快的文件搜索工具.与它相似的有异次元曾经介绍过一款很老的软件AVAFind,也非常的优 ...
- EasyUI系列学习(四)-Droppable(放置)
一.创建组件 1.使用标签创建一个放置区 <div id="pox" class="easyui-droppable" style="width ...
- 跨平台键鼠共享软件synergy使用
如果共享的机子都是win系统的话,也可以使用 无界鼠标. 这里主要讲跨平台通用的synergy.下载地址:http://synergy-project.org/ 注意1:最好下载同一位数,同一版本的. ...
- jQuery自适应倒计时插件
jQuery自适应倒计时插件 在线演示本地下载
- jQuery——表格添加数据
1.遮罩层宽高100%,position,不占位 2.注册a标签的删除事件,用on()方法,以方法可以动态添加,之前js需要利用冒泡属性(父标签注册事件,子标签冒泡,target===li触发事件) ...
- [Windows Server 2012] 手工创建安全网站
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:手工创建安全站 ...
- dom4j.jar 的调试方法
1.将jar包的路径写在 classpath下 在cmd窗口中,查看 classpath的内容是否已经加上该路径,win7 下cmd窗口一定要是管理员身份执行 2.在D盘新建一个DOM4JWriter ...
- css特殊效果
border-radius实现特殊形状 .box{ width: 100px; height: 100px; background: orange; border: 1px solid #000; b ...
- Tomcat8 连接池
1.所有的tomcat项目共用一个连接池配置 1.1 修改conf->context.xml文件,在Context节点下配置 <Resource name="jdbc/myDat ...