使用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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
JQuery优缺点分析说明
Jun 09 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
纯js实现画一棵树的示例
Sep 05 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
从理论角度讨论JavaScript闭包
Apr 03 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 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导入导出excel实例
2013/10/25 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
jquery.idTabs 选项卡使用示例代码
2014/09/03 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
angular实现商品筛选功能
2017/02/01 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[02:14]完美“圣”典2016风云人物:xiao8专访
2016/12/01 DOTA
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
python 实现二维列表转置
2019/12/02 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
奥地利时尚、美容、玩具和家居之家:Kastner & Öhler
2020/04/26 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
公司接待方案
2014/03/08 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
工厂标语大全
2014/10/06 职场文书
2015公司年度工作总结
2015/05/14 职场文书
第一书记观后感
2015/06/08 职场文书
Django程序的优化技巧
2021/04/29 Python
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL