<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        var numArray = new Array();

        var personNum = 30;

        $(function () {

            for (var i = 0; i < personNum; i++) {

                numArray[i] = i;

            }

            $("li").click(function () {

                var n = Math.floor(Math.random() * numArray.length + 1) - 1;  //生成随机数

                $(this).text(numArray[n]);

                numArray.splice(n, 1);  //移除随机数

            });

            $("#btnStart").click(function () {

                var totalArray = new Array();

                $("li").each(function (i, v) {

                    totalArray[i] = v.innerText;

                });

                var n = Math.floor(Math.random() * totalArray.length + 1) - 1;  //生成随机数

                this.value = totalArray[n];

                $("li").each(function (i, v) {

                    if (v.innerText == $("#btnStart").val()) {

                        this.style.background = "red";

                    }

                    else

                    {

                        this.style.background = "white";

                    }

                });

            });

        });

    </script>

    <style type="text/css">

        ul {

            /*display: block;

            float:left;*/

        }

            ul li {

                width: 150px;

                height: 150px;

                line-height: 150px;

                border: 1px solid gray;

                float: left;

                margin-left: 10px;

                margin-top: 10px;

                list-style-type: none;

                text-align: center;

                font-size: 20px;

            }

        #btnStart {

            width: 100px;

            height: 30px;

            margin-left: 10px;

            margin-top: 10px;

        }

    </style>

</head>

<body>

    <div>

        <ul>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

        </ul>

        <ul>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

        </ul>

        <ul>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

        </ul>

        <ul>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

        </ul>

        <ul>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

            <li>click me!</li>

        </ul>

    </div>

    <input id="btnStart" type="button" value="Start" />

</body>

</html>

JS 随机数字抽签的更多相关文章

  1. js随机生成字母数字组合的字符串 随机动画数字

    效果描述: 附件中只有一个index.html文件有效 其中包含css以及html两部分内容 纯js生成的几个随机数字 每次都不重复,点击按钮后再次切换 使用方法: 1.将css样式引入到你的网页中 ...

  2. 使用js Math.random()函数生成n到m间的随机数字

    何使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备,Math.random()函数返回0和1之间的伪随机数   摘要: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后 ...

  3. 用js做数字字母混合的随机四位验证码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. js随机更换

    如果想实现“随机”切换图像,那么我们要使用到几个Math()对象 第一个是random()函数,函数的功能是产生随机数,如果书写为 var a=Math.random() 那么所产生的随机数是0-1( ...

  5. 使用Math.random()函数生成n到m间的随机数字

    使用js生成n到m间的随机数字,主要目的是为后期的js生成验证码做准备,Math.random()函数返回0和1之间的伪随机数 讲解: 本文讲解如何使用js生成n到m间的随机数字,主要目的是为后期的j ...

  6. 利用JavaScript生成随机数字！

    <!DOCTYPE html> <html> <head> <title>1-99的随机数字</title> <script type ...

  7. CountUp.js – 让数字以非常有趣的动画方式显示

    CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...

  8. js 随机星星 document.createElement(); setAttribute()

    js 随机星星 document.createElement(); setAttribute() <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  9. 关于随机数字K线极值的统计结果

    如果有组随机数字,如数字彩票.我们对号码进行平均二分后,统计期出现的结果分布,对结果分布进行K线累加,得到一条折线. 这条折线的顶点和底点的统计上服从以下规则: 令总期数为N,统计区间为M,则在N期内 ...

随机推荐

  1. Python中的返回函数与闭包

    返回函数,顾名思义,就是高阶函数可以把函数作为return值返回.与闭包的关系是:闭包需要以返回函数的形式实现. 一. 返回函数 比如我们有一个求和函数: >>> def calc_ ...

  2. iOS大神班笔记02-模仿苹果创建单例

    首先我们得要知道苹果是如何实现单例的:1.不能外界调用alloc,一调用就崩掉,其实就是抛异常(类内部第一次调用alloc就不崩溃,其他都崩溃). 2.提供一个方法给外界获取单例.  3.内部创建一次 ...

  3. [poj] 3068 "Shortest" pair of paths || 最小费用最大流

    [原题](http://poj.org/problem?id=3068) 给一个有向带权图,求两条从0-N-1的路径,使它们没有公共点且边权和最小 . //是不是像传纸条啊- 是否可行只要判断最后最大 ...

  4. 51NOD 1554 欧姆诺姆和项链 巧妙利用KMP

    请戳这里! #include<cstdio> #define N 1000100 char s[N]; int n,k,nxt[N],ans[N]; int main() { scanf( ...

  5. BZOJ4894 天赋 【矩阵树定理】

    题目链接 BZOJ4894 题解 双倍经验P5297 题解 #include<iostream> #include<cstring> #include<cstdio> ...

  6. zoj3161 Damn Couples

    不想打题面了,题面戳这里 这道题目的模型转换地有点猛.首先我们肯定需要让老板把那些不相邻的人的卡牌放在前面,这样他们就作废了.然后剩下的卡牌就都是相邻人之间的了.我们就可以把这个序列分成若干个联通块, ...

  7. 重量WeightFormatUtil辅助类

    package com.jlb.scan.util; import java.text.DecimalFormat; public class WeightFormatUtil { public st ...

  8. VS2013 Sqlite3 操作指令

    extern "C"{ #include "sqlite3.h" }; #pragma comment(lib,"sqlite.lib") ...

  9. Java定义bean实体类中的变量时变量名的问题

    首先:TMD,这个问题花了我两个多小时,居然是因为一个字母的大小写导致的,我瞬间就&Y^%^&%&()*%￥%￥￥&^#@%&; 事情是酱紫的: 我定义了一个变 ...

  10. 【linux高级程序设计】（第十五章）UDP网络编程应用 1

    UDP网络通信流程 UDP没有connect的过程,故发送数据时需要指明目的地址,不能使用read/write/send/recv. 采用sendto()和recvfrom() ssize_t sen ...