<!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. python多线程学习三

    本文希望达到的目标: 1.服务器端与线程池  (实例demo) 2.并发插入db与线程池(实例demo) 3.线程池使用说明 4.线程池源码解析 一.基于socket的服务器与线程池连接. 1.在i7 ...

  2. python IO 多路复用

    一.epoll epoll 参考链接: https://www.cnblogs.com/Alanpy/articles/5125986.html epoll  参考链接: https://www.cn ...

  3. 【python】python嵌套循环内层循环只执行一次

    今天写了一个两个基因集找相同的基因然后输出这么个小程序就无论如何也跑不起来,原因出在循环嵌套上,这方面之前就出过问题,后来阴差阳错的就好了我也没太注意,但是最近这个问题严重制约了工作效率,我决心找到问 ...

  4. QT创建TCP Socket通信

    最近在学习QT,了解到QT可以进行SOCKET网络通信,进行学习,并建立一个简单的聊天DEMO.为了测试是否能与VS2012下的程序进行通信,在VS2012下建立一个客户端程序,进行通信测试,发现可以 ...

  5. js实现打印

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. Linux 高级文件管理

    1.标准输出(ls -l /dev/stdin 0 ),标准输入(ls -l /dev/stdout 1 ),错误输出(ls -l /dev/stderr 2 ). 2.ls /etc/passwd  ...

  7. Springboot 使用PageHelper分页插件实现分页

    一.pom文件中引入依赖 二.application.properties中配置以下内容(二选一方案) 第一种:pagehelper.helper-dialect=mysqlpagehelper.re ...

  8. echarts2.0tooltip边框限制导致tooltip显示不全解决办法

    1.显示常数位置x和y; 2.根据鼠标移动显示:tooltip : { trigger: 'axis', position:function(p){ //其中p为当前鼠标的位置 return [p[0 ...

  9. java程序员面试交流项目经验

    粘贴自:https://blog.csdn.net/wangyuxuan_java/article/details/8778211 1:请你介绍一下你自己 这是面试官常问的问题.一般人回答这个问题过于 ...

  10. 6_linux用户及权限(1)

    ------------用户管理: useradd,userdel,usermod,passwd,chsh,chfn,finger,id,chage组管理: groupadd,groupdel,gro ...