使用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 用原型继承来实现对象系统
Mar 22 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
Feb 16 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
javascript实现循环广告条效果
Dec 12 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
vue总线机制(bus)知识点详解
May 10 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多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
jQuery中attr()方法用法实例
2015/01/05 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
利用jQuery实现一个简单的表格上下翻页效果
2017/03/14 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
[11:57]《一刀刀一天》第十七期:TI中国军团加油!
2014/05/26 DOTA
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
Python: glob匹配文件的操作
2020/12/11 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
TCP/IP的分层模型
2013/10/27 面试题
甜美蛋糕店创业计划书
2014/01/30 职场文书
端午节演讲稿
2014/05/23 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
Golang jwt身份认证
2022/04/20 Golang