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 相关文章推荐
如何简单地用YUI做JavaScript动画
Mar 10 Javascript
JS OOP包机制,类创建的方法定义
Nov 02 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
May 17 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
在angular 6中使用 less 的实例代码
May 13 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
Sep 22 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
php获取域名的google收录示例
2014/03/24 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP比你想象的好得多
2014/11/27 PHP
php文件读取方法实例分析
2015/06/20 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
phpmailer绑定邮箱的实现方法
2016/12/01 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Cython 三分钟入门教程
2009/09/17 Python
Python实现备份文件实例
2014/09/16 Python
Python中函数参数调用方式分析
2018/08/09 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
运动会广播稿50字
2014/01/26 职场文书
家长评语和期望
2014/02/10 职场文书
商业融资计划书
2014/04/29 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
先进学校事迹材料
2014/12/30 职场文书
全陪导游词
2015/02/04 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
分享一些Java的常用工具
2021/06/11 Java/Android
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python