使用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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
JavaScript中的substr()方法使用详解
Jun 06 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
ES6中Proxy代理用法实例浅析
Apr 06 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
解决vue项目中出现Invalid Host header的问题
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正则表达匹配中文问题分析小结
2012/03/25 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
jquery实现多条件筛选特效代码分享
2015/08/28 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
微信小程序时间轴实现方法示例
2019/01/14 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
微信小程序网络请求实现过程解析
2019/11/06 Javascript
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python之pymysql的使用小结
2019/07/01 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
浅析Python 多行匹配模式
2020/07/24 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
大一学生假期实习的自我评价
2013/10/12 职场文书
计算机操作自荐信
2013/12/07 职场文书
中学家长会邀请函
2014/01/17 职场文书
教师演讲稿开场白
2014/08/25 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js