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>
时间: 2024-10-24 15:11:07

jq 抽奖的相关文章

JQ广告弹窗&amp;随机抽奖————JQ

1.JQ广告弹窗 <div id="flo"> <img src="image.jpeg"> </div> <script> var flo = document.getElementById('flo'); var open = document.getElementById('open'); var max_left = document.documentElement.clientWidth - flo.offs

jQuery幸运大转盘_jQuery+PHP抽奖程序的简单实现

在线实例 查看演示 完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

利用canvas实现抽奖转盘---转载别人的

功能需求 转盘要美观,转动效果流畅. 转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 转动动画完成后要有相应提示. 获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.html). 使用canvas标签和对应的html5 api 进行操作.(canvas中文手册可以查看http://javascript.r

利用canvas实现抽奖转盘

之前做过的项目中,有需要抽奖转盘功能的.项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家. 功能需求 转盘要美观,转动效果流畅. 转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字. 转动动画完成后要有相应提示. 获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示. 知识要点 引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:http://www.jqcool.net/jquery-jqueryrotate.html). 使用ca

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

幸运抽奖,分解一个千位数求各位数之和

import java.util.Scanner; /** * @author 蓝色以太 * 幸运抽奖 */ public class LuckyDraw { public static void main(String[] args) { Scanner sc=new Scanner(System.in); System.out.println("请输入4位会员卡号:"); int num=sc.nextInt(); int ge=num%10; int shi=num%100/10

自写原生jq滚轮插件

自己仿bootStarp插件写的,思路局限,仅供交流,有好的建议还请不吝赐教//使用方法:                //html:需要ul>li>a的模式,a需要类名,需要设置page-scroll属性,page-scroll属性需要1以数字结尾,容器为所变化的最大页面                //js:请传入一个事件对象,对象需要传入属性:pageAnchorName(锚点id)及contianer(容器类)                //下标jq对象传入$navIndex属

js抽奖

http://www.aichengxu.com/view/64369 <!Doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><script src="http://code.jquery.com/jquery-1.7.1.js" type="text/j

jQ控制前端输入用户为空是的提醒

1.在jQ中$(function(){})函数的意思是 $(document).ready(function(){}) 的简写,用来在DOM加载完成之后执行一系列预先定义好的函数 placeholder属性提供可描述输入字段预期值的提示信息(hint),该提示会在输入字段为空时显示,并会在字段获得焦点时消失 <input type="password" name="password" placeholder="密码"> jq文件 &l