使用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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
Vue请求java服务端并返回数据代码实例
Nov 28 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
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
PHP+DBM的同学录程序(2)
2006/10/09 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
php根据用户语言跳转相应网页
2015/11/04 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
2015/09/01 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
让nodeJS支持ES6的词法----babel的安装和使用方法
2017/07/31 NodeJs
vue.js todolist实现代码
2017/10/29 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python设计模式之简单工厂模式实例详解
2019/01/22 Python
python中的逆序遍历实例
2019/12/25 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
校园餐饮创业计划书
2014/01/10 职场文书
财经学院自荐信范文
2014/02/02 职场文书
大学学习个人的自我评价
2014/02/18 职场文书
陈欧广告词
2014/03/14 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
就业推荐表导师评语
2014/12/31 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
Python一行代码实现自动发邮件功能
2021/05/30 Python
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers