基于JS实现的随机数字抽签实例

话不多说，附上源码，仅供大家参考

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • javascript创建含数字字母的随机字符串方法总结

    javascript创建含数字字母的随机字符串方法总结

    第一种: //code from http://caibaojian.com/js-random-string.html function makeid() { var text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for( var i=0; i < 5; i++ ) text += possible.charAt(Math

  • 基于javascript实现彩票随机数生成（简单版）

    基于javascript实现彩票随机数生成（简单版）

    本文实例讲解了JavaScript 实现彩票中随机数组的获取详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Math.random方法彩票随机数的生成</title> </head> <body> <!--

  • JS产生随机数的几个用法详解

    JS产生随机数的几个用法详解 <script> function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,10); alert(num); </script> var chars = ['0','1','2','3','4','5','6','7

  • JavaScript随机打乱数组顺序之随机洗牌算法

    假如有一个数组是这样子: var arr1 = ["a", "b", "c", "d"]; 如何随机打乱数组顺序,也即洗牌. 有一个比较广为传播的简单随机算法: function RandomSort (a,b){ return (0.5 - Math.random()); } 实际证明上面这个并不完全随机. 随便一搜网上太多这种东西了,看一下stackoverflow上的一个高分回答,答案出自github上. knuth-s

  • JS代码随机生成姓名、手机号、身份证号、银行卡号

    开发测试的时候,经常需要填写姓名.手机号.身份证号.银行卡号,既要符合格式要求.又不能重复.大家会到网上搜各种生成器. 下面小编自己写的一个js生成器代码.随机生成姓名.手机号.身份证号.银行卡号的js代码. // 生成随机姓名 function getName(){ var familyNames = new Array( "赵", "钱", "孙", "李", "周", "吴", &

  • Javascript点击按钮随机改变数字与其颜色

    Javascript点击按钮随机改变数字与其颜色

    先来看看效果图 实例代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #box { margin: 100px auto; width: 200px; height: 150px; line-height: 150px; letter-spacing: 1

  • JS简单生成两个数字之间随机数的方法

    JS简单生成两个数字之间随机数的方法

    本文实例讲述了JS简单生成两个数字之间随机数的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <!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/xh

  • JS生成不重复的随机数组的简单实例

    JS生成不重复的随机数组的简单实例 //获取数组中的随机数 //HF.Math.RandomNumbers是前缀,可以自己定义,主要看逻辑代码 HF.Math.RandomNumbers = function (startNum, endNum, count, repeat) { var ret = []; if (repeat) { for (var i = 0; i < count; i++) { ret[i] = HF.Math.Random(startNum, endNum); } re

  • 详谈JS中实现种子随机数及作用

    前言 在前端开发中,尤其是游戏开发,经常会用到随机数,那么我们会第一时间想到:Math.random,大家略微的看看如下代码: for (var i= 0; i<10; i++) { document.writeln(Math.random() +"<br />"); } 运行如上代码,也确实生成了10个不同的数字,当然你可以生成更多,看起来挺不错的,如果仅仅如此,那么本文就没必要写了. 示例 试着想一下,如果在某一个场景,我们做一个游戏,用户玩到一半的时候退出了,这

  • JS获取随机数和时间转换的简单实例

    Math.floor(Math.random()*10);//产生10以内的随机数 new Date(); //获取当前时间(字符串类型) new Date().getTime(); //获取当前的毫秒数 new Date(1356334057000) ;//通过毫秒数创建时间 new Date().getMonth()+1; //获取月份,从0开始,所以要加上1 new Date().getFullYear(); //获取年份 new Date().getDay()+1;//获取当前是星期X,

  • JS从数组中随机取出几个数组元素的方法

    JS如何从一个数组中随机取出一个元素或者几个元素. 假如数组为 var items = ['1','2','4','5','6','7','8','9','10']; 1.从数组items中随机取出一个元素 var item = items[Math.floor(Math.random()*items.length)]; 2.从前面的一篇随机数组中随机取几个元素 function getRandomArrayElements(arr, count) { var shuffled = arr.sl

  • JS随机打乱数组的方法小结

    本文实例总结了JS随机打乱数组的方法.分享给大家供大家参考,具体如下: JS中,要打乱数组有很多方法,网上流传一个国外人写的方法,我认为是最精简的了: function randomsort(a, b) { return Math.random()>.5 ? -1 : 1; //用Math.random()函数生成0~1之间的随机数与0.5比较,返回-1或1 } var arr = [1, 2, 3, 4, 5]; arr.sort(randomsort); 这里介绍下sort()函数,在JS中

  • JS生成某个范围的随机数【四种情况详解】

    前言: JS没有现成的函数,能够直接生成指定范围的随机数. 但是它有个函数:Math.random()  这个函数可以生成 [0,1) 的一个随机数. 利用它,我们就可以生成指定范围内的随机数. 而涉及范围的话,就有个边界值的问题.这样就包含四种情况: 1)min ≤ r ≤ max  (一般这种比较常见) 2)min ≤ r < max 3) min < r ≤ max 4)min < r < max 一.min ≤ r ≤ max function RandomNumBoth(

随机推荐