基于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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
详解堆的javascript实现方法
Nov 29 Javascript
setTimeout学习小结
Feb 08 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
vue安装遇到的5个报错及解决方法
Jun 12 Javascript
在Chrome DevTools中调试JavaScript的实现
Apr 07 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 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
PHP面向对象编程快速入门
2006/12/14 PHP
php中static静态变量的使用方法详解
2010/06/04 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
jWiard 基于JQuery的强大的向导控件介绍
2011/10/28 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python学习pygal绘制线图代码分享
2017/12/09 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Python中SQLite如何使用
2020/05/27 Python
图解CSS3制作圆环形进度条的实例教程
2016/05/26 HTML / CSS
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
高二历史教学反思
2014/01/25 职场文书
财务部总监岗位职责
2014/03/12 职场文书
网站客服岗位职责
2014/04/05 职场文书
求职信名称怎么写
2014/05/26 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
检讨书格式
2015/05/07 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python
python缺失值填充方法示例代码
2022/12/24 Python