使用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 相关文章推荐
extjs form textfield的隐藏方法
Dec 29 Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
js实时获取并显示当前时间的方法
Jul 31 Javascript
jQuery Validate验证框架经典大全
Sep 23 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 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数组的概述及分类与声明代码演示
2013/02/26 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
smarty自定义函数用法示例
2016/05/20 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP反射学习入门示例
2019/06/14 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
javascript offsetX与layerX区别
2010/03/12 Javascript
javascript中使用replaceAll()函数实现字符替换的方法
2010/12/25 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
Python数据库的连接实现方法与注意事项
2016/02/27 Python
对pandas中apply函数的用法详解
2018/04/10 Python
详解python3中zipfile模块用法
2018/06/18 Python
详解Python实现进度条的4种方式
2020/01/15 Python
Python 文件数据读写的具体实现
2020/01/24 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Python定义函数实现累计求和操作
2020/05/03 Python
小学生自我评价范文
2014/01/25 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
学校评语大全
2014/05/06 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
年终工作总结范文2014
2014/11/27 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
JavaScript数组 几个常用方法总结
2021/11/11 Javascript