使用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 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
判断对象是否Window的实现代码
Jan 10 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
详解JS中的attribute属性
Apr 25 Javascript
Node.js 使用jade模板引擎的示例
May 11 Javascript
解决vue热替换失效的根本原因
Sep 19 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
如何用JavaScript实现一个数组惰性求值库
May 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
Dojo 学习要点
2010/09/03 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
2012/09/14 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
nodejs实现获取本地文件夹下图片信息功能示例
2019/06/22 NodeJs
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
python装饰器深入学习
2018/04/06 Python
朴素贝叶斯分类算法原理与Python实现与使用方法案例
2018/06/26 Python
python去除文件中重复的行实例
2018/06/29 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
python输入错误后删除的方法
2019/10/12 Python
Python super()函数使用及多重继承
2020/05/06 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
环境工程毕业生自荐信
2013/11/17 职场文书
致400米运动员广播稿
2014/02/07 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
教室布置标语
2014/06/26 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
道歉信怎么写
2015/05/12 职场文书