使用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 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
CSS常用网站布局实例
2008/04/03 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
JS的千分位算法实现思路
2013/07/31 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
2015/05/14 Javascript
Javascript函数的参数
2015/07/16 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
JSON 数据格式详解
2017/09/13 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
javascript实现贪吃蛇小游戏
2020/07/28 Javascript
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
小程序实现列表倒计时功能
2021/01/29 Javascript
用Python实现换行符转换的脚本的教程
2015/04/16 Python
Python数据类型之List列表实例详解
2019/05/08 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
python sorted方法和列表使用解析
2019/11/18 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
对Python中 \r, \n, \r\n的彻底理解
2020/03/06 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
高级护理专业大学生求职信
2013/10/24 职场文书
学习委员自我鉴定
2014/01/13 职场文书
英语感恩演讲稿
2014/01/14 职场文书
2014年元旦活动方案
2014/02/15 职场文书
旅游活动总结
2014/08/27 职场文书
保研推荐信格式
2015/03/25 职场文书
承兑汇票延期证明
2015/06/23 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers