基于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中符号转意问题示例探讨
Aug 19 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
小程序实现搜索框
Jun 19 Javascript
微信小程序 导入图标实现过程详解
Oct 11 Javascript
js实现随机点名程序
Sep 17 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
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
基于Vant UI框架实现时间段选择器
2020/12/24 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
python验证码识别的实例详解
2016/09/09 Python
Python 类的继承实例详解
2017/03/25 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python中取绝对值简单方法总结
2020/07/24 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
刘公岛导游词
2015/02/05 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
oracle通过存储过程上传list保存功能
2021/05/12 Oracle