使用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 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
浅谈jQuery为哪般去掉了浏览器检测
Aug 29 Javascript
js表单登陆验证示例
Oct 19 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
JavaScript纯色二维码变成彩色二维码
Jul 23 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
8个有意思的JavaScript面试题
Jul 30 Javascript
js+h5 canvas实现图片验证码
Oct 11 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
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
2013/11/27 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
JQuery事件冒泡和默认行为代码实例
2020/05/13 jQuery
微信小程序文章列表功能完整实例
2020/06/03 Javascript
python 从远程服务器下载东西的代码
2013/02/10 Python
Python使用itchat 功能分析微信好友性别和位置
2019/08/05 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
网络技术专业求职信
2014/05/02 职场文书
伦敦奥运会的口号
2014/06/21 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2014幼儿教师个人工作总结
2014/12/03 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
企业愿景口号
2015/12/25 职场文书
高一化学教学反思
2016/02/22 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS