基于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中数组(Array)的排序(sort)注意事项说明
Jan 24 Javascript
Bootstrap的图片轮播示例代码
Aug 31 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 Javascript
基于jQuery实现表格内容的筛选功能
Aug 21 Javascript
jQuery右下角悬浮广告实例
Oct 17 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
vue滑动吸顶及锚点定位的示例代码
May 10 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 Curl出现403错误的解决办法
2014/05/29 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
详解JavaScript数组的操作大全
2015/10/19 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
js传递数组参数到后台controller的方法
2018/03/29 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
python中的协程深入理解
2019/06/10 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
行政部总经理岗位职责
2014/01/04 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
小学生期末评语大全
2014/04/21 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
黄石寨导游词
2015/02/05 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
赢在执行观后感
2015/06/16 职场文书
如何写新闻稿
2015/07/18 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
python如何读取和存储dict()与.json格式文件
2022/06/25 Python