使用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 相关文章推荐
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
深入理解JavaScript的async/await
Aug 05 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
vue实现评论列表功能
Oct 25 Javascript
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
36个正则表达式(开发效率提高80%)
Nov 17 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
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
WampServer下安装多个版本的PHP、mysql、apache图文教程
2015/01/07 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
基于Jquery的将DropDownlist的选中值赋给label的实现代码
2011/05/06 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
python递归计算N!的方法
2015/05/05 Python
python黑魔法之参数传递
2016/02/12 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python 实现return返回多个值
2019/11/19 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
如何在Anaconda中打开python自带idle
2020/09/21 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
Python中如何定义一个函数
2016/09/06 面试题
气象学专业个人求职信
2014/03/15 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
python实现商品进销存管理系统
2022/05/30 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android