使用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 表单的友好用户体现
Jan 07 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
浅谈js闭包理解
Mar 28 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
js时间转换毫秒的实例代码
Aug 21 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
一次编写,随处运行
2006/10/09 PHP
php学习之流程控制实现代码
2011/06/09 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
js客户端快捷键管理类的较完整实现和应用
2010/06/08 Javascript
JavaScript实现快速排序(自已编写)
2012/12/19 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
ztree实现权限横向显示功能
2017/05/20 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
如何解决jQuery 和其他JS库的冲突
2020/06/22 jQuery
使用python遍历指定城市的一周气温
2017/03/31 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
详解Python设计模式之策略模式
2020/06/15 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
印尼综合在线预订网站:Tiket.com(机票、酒店、火车、租车和娱乐)
2018/10/11 全球购物
《最佳路径》教学反思
2014/04/13 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
小学语文教研活动总结
2014/07/01 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL