<!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. Android记事本05

    昨天: intentFilter 今天: URL和logcat 问题: ADK更新后无法打开布局文件.xml

  2. 手机App测试如何获取包名的入口【两种方式】

    在进行手机APP测试的时候经常要获取包名.那么何为包名呢?简单来说其实就是手机APP的安装apk文件的名称,每个手机APP(软件)的包名都是唯一的. 那么我们怎样来获取包名以及包名的入口呢? 方法一: ...

  3. 从 C10K 到 C500K

    国外的 Urban Airship 公司的工程师在其官方网志上发文章介绍他们在产品环境中做到 50 万并发客户端,Java + Pure NIO 的实现,最近又有文章介绍针对 Linux Kernel ...

  4. vue cli & npm err & shit cnpm

    vue cli & npm err & shit cnpm npm err & shit cnpm https://github.com/vuejs/vue-cli/issue ...

  5. 【bzoj3438】小M的作物 网络流最小割

    原文地址:http://www.cnblogs.com/GXZlegend/p/6801522.html 题目描述 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物 ...

  6. POJ 2186 受欢迎的牛 Tarjan基础题

    #include<cstdio> #include<algorithm> #include<cstring> #include<vector> #inc ...

  7. 2017 多校4 Dirt Ratio

    多校4 Dirt Ratio(二分+线段树) 题意: 给出n个数,找一段区间使得区间内不同数字个数除以区间长度最小,求这个最小值,\(n<=60000,a_i<=n\) 题解: 二分答案m ...

  8. BZOJ2763 [JLOI2011]飞行路线 【分层图 + 最短路】

    题目 Alice和Bob现在要乘飞机旅行,他们选择了一家相对便宜的航空公司.该航空公司一共在n个城市设有业务,设这些城市分别标记为0到n-1,一共有m种航线,每种航线连接两个城市,并且航线有一定的价格 ...

  9. UVA 10652 Board Wrapping(二维凸包)

    传送门 刘汝佳<算法竞赛入门经典>P272例题6包装木板 题意:有n块矩形木板,你的任务是用一个面积尽量小的凸多边形把它们抱起来,并计算出木板占整个包装面积的百分比. 输入:t组数据,每组 ...

  10. windows下修改Mysql5.7.11初始密码的图文教程

    参考:http://www.jb51.net/article/98481.htm [摘要:1.my-default.ini 更名my.ini 正在解压的目次上面复造my-default.ini一份更名 ...