使用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脚本函数库 方便开发
Oct 13 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
javascript清空table表格的方法
May 14 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
深入理解Node.js中通用基础设计模式
Sep 19 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
微信小程序聊天功能的示例代码
Jan 13 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 开源AJAX框架14种
2009/08/24 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
Node.js Buffer用法解读
2018/05/18 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
js实现select下拉框选择
2020/01/11 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
js实现简易拖拽的示例
2020/10/26 Javascript
js制作提示框插件
2020/12/24 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
机器学习的框架偏向于Python的13个原因
2017/12/07 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
为何人工智能(AI)首选Python?读完这篇文章你就知道了(推荐)
2019/04/06 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
房产销售经理职责
2013/12/20 职场文书
应届实习生的自我评价范文
2014/01/05 职场文书
初中数学教学反思
2014/01/16 职场文书
大学生求职信范文
2014/05/24 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
工作证明格式及范本
2014/09/12 职场文书
个人批评与自我批评
2014/10/15 职场文书
工作推荐信模板
2015/03/25 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python