使用JS编写的随机抽取号码的小程序


Posted in Javascript onAugust 11, 2017

刚开始学习JavaScript,写了一个随机抽取号码的小程序,附上body里的所有代码,供大家参考。

本程序可以实现功能如下:

1、在文本框中输入抽号最大值

2、点击按钮,开始抽号,随机生成1~最大值之间的整数

3、已经抽取的号码不能再次抽取到,保证号码的唯一性

4、将号码结果放入result中显示出来

5、将已经生成的号码存入exist中显示出来

具体代码如下:

<body>
  <input type="text" id="txt" placeholder="请在里面输入号码最大值!">
  <input type="button" id="btn" value="抽号">
  <div>
   <span>结果:</span>
   <span id="result"></span>
  </div>
  <div>
   <span>已抽取:</span>
   <span id="exist"></span>
  </div>
  <script type="text/javascript">
   var oBtn = document.getElementById("btn");
   var oTxt = document.getElementById("txt");
   var oRes = document.getElementById("result");
   var oExi = document.getElementById("exist");
   var arr = []; //存放座号 
   oBtn.onclick = function() {
    getSeat(oTxt.value);
   }
   function getSeat(maxnum) {
    for(var i = 0; i < maxnum; i++){
     var num = Math.floor(Math.random() * maxnum) + 1;
     var j;
     for(j = 0; j < arr.length; j++) {
      if(num == arr[j])
       break;
     }
     if(j == arr.length) {
      arr.push(num);
      oRes.innerHTML = num;
      oExi.innerHTML = arr;
      return;
     }
    }
   }
  </script>
 </body>

运行结果如下:

使用JS编写的随机抽取号码的小程序

总结

以上所述是小编给大家介绍的使用JS编写的随机抽取号码的小程序,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
JSON无限折叠菜单编写实例
Dec 16 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
详解node-ccap模块生成captcha验证码
Jul 01 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
在原生不支持的旧环境中添加兼容的Object.keys实现方法
Sep 11 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
layer插件实现在弹出层中弹出一警告提示并关闭弹出层的方法
Sep 24 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 #Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 #Javascript
Vue.js仿微信聊天窗口展示组件功能
Aug 11 #Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 #Javascript
JS SetInterval 代码实现页面轮询
Aug 11 #Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 #Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 #Javascript
You might like
文件系统基本操作类
2006/11/23 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
PHP模拟http请求的方法详解
2016/11/09 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
解释&amp;&amp;和||在javascript中的另类用法
2014/07/28 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
JavaScript数据类型学习笔记
2016/01/25 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
JavaScript 数组的深度复制解析
2016/11/02 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
AngularJS的脏检查深入分析
2017/04/22 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
React传值 组件传值 之间的关系详解
2019/08/26 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
python删除过期文件的方法
2015/05/29 Python
python rsa 加密解密
2017/03/20 Python
python列表推导式操作解析
2019/11/26 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
python之随机数函数的实现示例
2020/12/30 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
一份创业计划书范文
2014/02/08 职场文书
岗位明星事迹材料
2014/05/18 职场文书
高校群众路线教育实践活动剖析材料
2014/10/10 职场文书
民用住房租房协议书
2014/10/29 职场文书
离婚答辩状怎么写
2015/05/22 职场文书