JavaScript实现简单的双色球(实例讲解)


Posted in Javascript onJuly 31, 2017

如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双色球</title>
  <link rel="stylesheet" type="text/css" href="css/twoToneClass.css" rel="external nofollow" >
</head>
  <script type="text/javascript">
    function getway(){
    //定义一个数组 用来装红色球的随机数
      var reds=[parseInt(Math.random()*33+1)]; //1-33的随机数
      //定义一个数组 用来装蓝色球的随机数
      var blues=[parseInt(Math.random()*16+1)]; //1-16的随机数

      while(reds.length<6){  //双色球是6红1蓝,故长度小于6 说明会循环5次 因为前面reds已经有一次的默认值
        var r=parseInt(Math.random()*33+1); //定义r 随机数的取值与reds一致 用于与reds作比较
        for (var i = 0; i < reds.length; i++) {
          if (reds[i]==r) {    //若 reds中的随机值与r中的相等,则跳出,继续i++取值
            break;        //若reds中的随机值与r中的不相等,则进入else if
          } else if(i==reds.length-1){ //reds.length-1 --> 原先的reds.length为5,减1为4,而数组是从0 开始算,所以这里会循环5次,刚好与 reds.length<6 同步;且 i等于reds.length-1,是让随机数循环5次(另外就是让它找到定义中的最后一位数)
            reds.push(r);        //将r中的值添加到reds中  push():向数组中添加元素
//值得注意是!r与reds作比较时,是以reds中现有的数作比较,因为 reds.push(r); 这句代码已经向reds中添加了数值,所以r不是以reds中自身产生的随机数作比较,而是原先r添加到reds中的值作比较
          }
        }
      }
      //document.write(reds);
      //排序
      reds.sort(function compare(a,b) {
        return a-b;
      })
      //打印随机数
      for (var h = 0; h < reds.length; h++) {
        document.getElementById('tone'+h+'').innerHTML=reds[h];
      }
       document.getElementById('tone6').innerHTML=blues;
    }
    
  </script>
<body>
  <div id="tone0"></div>
  <div id="tone1"></div>
  <div id="tone2"></div>
  <div id="tone3"></div>
  <div id="tone4"></div>
  <div id="tone5"></div>
  <div id="tone6"></div>
  <button type="button" id="cilckMe" onclick="getway()">点我生成双色球</button>
</body>
</html>

以上这篇JavaScript实现简单的双色球(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 定义新对象方法
Feb 20 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
Nov 23 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
深入理解Vue transition源码分析
Jul 30 #Javascript
使用travis-ci如何持续部署node.js应用详解
Jul 30 #Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 #Javascript
webpack配置sass模块的加载的方法
Jul 30 #Javascript
Angular.js中$resource高大上的数据交互详解
Jul 30 #Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 #Javascript
webpack实现热加载自动刷新的方法
Jul 30 #Javascript
You might like
Zerg兵种介绍
2020/03/14 星际争霸
sony ICF-2010 拆解与改装
2021/03/02 无线电
PHP 日常开发小技巧
2009/09/23 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
Javascript表格翻页效果实现思路及代码
2013/08/23 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python的gevent框架的入门教程
2015/04/29 Python
python实现备份目录的方法
2015/08/03 Python
python实现中文转换url编码的方法
2016/06/14 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
python中正则表达式与模式匹配
2019/05/07 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
住房公积金接收函
2014/01/09 职场文书
留学自荐信写作方法
2014/01/27 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
2014普法依法治理工作总结
2014/12/18 职场文书
详解nginx location指令
2022/01/18 Servers