使用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 相关文章推荐
关于B/S判断浏览器断开的问题讨论
Oct 29 Javascript
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
鼠标事件延时切换插件
Mar 12 Javascript
JQuery的自定义事件代码,触发,绑定简单实例
Aug 01 Javascript
jQuery制作拼图小游戏
Jan 12 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
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
isset和empty的区别
2007/01/15 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP读取zip文件的方法示例
2016/11/17 PHP
获取body标签的两种方法
2011/10/13 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
ReactNative实现图片上传功能的示例代码
2017/07/11 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
Python中return语句用法实例分析
2015/08/04 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python3数字求和的实例
2019/02/19 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
OpenCV+Python--RGB转HSI的实现
2019/11/27 Python
Tensorflow 多线程设置方式
2020/02/06 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
Python中如何引入第三方模块
2020/05/27 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Python jieba库分词模式实例用法
2021/01/13 Python
韩国休闲女装品牌网站:ANAIS
2016/08/24 全球购物
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
药学专业个人的自我评价
2013/12/31 职场文书
财产保全担保书范文
2014/04/01 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
运动会演讲稿200字
2014/08/25 职场文书