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


Posted in Javascript onDecember 08, 2016

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

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
前端MVVM框架解析之双向绑定
Jan 24 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 #Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 #Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 #Javascript
通过Ajax使用FormData对象无刷新上传文件方法
Dec 08 #Javascript
js倒计时小实例(多次定时)
Dec 08 #Javascript
详解JavaScript中的属性和特性
Dec 08 #Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 #Javascript
You might like
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
Use Word to Search for Files
2007/06/15 Javascript
javascript 节点遍历函数
2010/03/28 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
如何解决日期函数new Date()浏览器兼容性问题
2019/09/11 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
Python Requests库基本用法示例
2018/08/20 Python
python树莓派红外反射传感器
2019/01/21 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
python使用docx模块读写docx文件的方法与docx模块常用方法详解
2020/02/17 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
python如何构建mock接口服务
2021/01/28 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
英国领先的男士服装和时尚零售商:Burton
2017/01/09 全球购物
公司领导班子对照检查材料
2014/09/24 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
研究生毕业论文导师评语
2014/12/31 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript