使用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窗口功能指南之在窗口中书写内容
Jul 21 Javascript
JavaScript 学习笔记(十五)
Jan 28 Javascript
jQuery.ajax 用户登录验证代码
Oct 29 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 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生成HTML静态页面实例代码
2008/08/31 PHP
用PHP将网址字符串转换成超链接(网址或email)
2010/05/25 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP实现腾讯短网址生成api接口实例
2020/12/08 PHP
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
python实现自动网页截图并裁剪图片
2018/07/30 Python
Python最小二乘法矩阵
2019/01/02 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Jacobi迭代算法的Python实现详解
2019/06/29 Python
python实现静态服务器
2019/09/05 Python
python分布式编程实现过程解析
2019/11/08 Python
PyTorch笔记之scatter()函数的使用
2020/02/12 Python
python绘制汉诺塔
2021/03/01 Python
杭州-DOTNET笔试题集
2013/09/25 面试题
简述DNS进行域名解析的过程
2013/12/02 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
班主任寄语大全
2014/04/04 职场文书
加入学生会演讲稿
2014/04/24 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
创先争优活动承诺书
2014/08/30 职场文书
六一儿童节开幕词
2015/01/29 职场文书
研究生简历自我评
2015/03/11 职场文书
幸福来敲门观后感
2015/06/04 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
2019年大学推荐信
2019/06/24 职场文书
Django如何与Ajax交互
2021/04/29 Python