使用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 相关文章推荐
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
javascript标签在页面中的位置探讨
Apr 11 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
Highcharts学习之数据列
Aug 03 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
最新最全的手机号验证正则表达式
Feb 24 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
新浪SAE搭建PHP项目教程
2015/01/28 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
Python数据分析之真实IP请求Pandas详解
2016/11/18 Python
Python时间获取及转换知识汇总
2017/01/11 Python
解决安装python库时windows error5 报错的问题
2018/10/21 Python
python网络爬虫 CrawlSpider使用详解
2019/09/27 Python
postman和python mock测试过程图解
2020/02/22 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
python 装饰器重要在哪
2021/02/14 Python
html5的localstorage详解
2017/05/09 HTML / CSS
linux面试题参考答案(11)
2012/05/01 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
求职推荐信
2013/10/28 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
岗位竞聘书范文
2014/03/31 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python