<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>双色球</title>

    <link rel="stylesheet" type="text/css" href="css/twoToneClass.css">

</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实现简单的双色球的更多相关文章

  1. JavaScript设置简单的自动时间

    下面就是一段简单的JavaScript设置简单的自动时间,时间显示在一个输入框input里面. <html> <head> </head> <body> ...

  2. Javascript的简单测试环境

    在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...

  3. javaScript(2)---简单使用

    javaScript(2)---简单使用 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一.创建一张HTML页面 <!DOCTYPE ...

  4. Javascript学习-简单测试环境

    Javascript学习-简单测试环境 在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很 ...

  5. JavaScript中简单排序总结

    JavaScript中简单排序总结 冒泡排序 经典排序算法, 双重for循环 在第二个for循环的时候, j < arr.len -1 -i , 这一步的优化很重要 function bullS ...

  6. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

  7. 用javascript实现简单的用户登录验证

    用javascript实现简单的用户登录验证 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. JavaScript做简单的购物车效果（增、删、改、查、克隆）

    比如有时候遇到下面这种情况,点击加入购物车,然后在上方的购物车中动态的添加商品以及商品的信息,我们就可以通过JavaScript实现简单的这些操作. 首先我们需要在html文档中,通过css对页面的布 ...

  9. JavaScript 最简单的图片切换

    使用前在文件外部要有1.jpg 2.jpg 只是简单的模仿flash图片切换,可在此基础上引申出各种不同的效果. 思路: 建立一个数组存放图片的src,然后调用setInterval周期性的调用cha ...

随机推荐

  1. 把编译安装的httpd 实现服务脚本，通过service和chkconfig 进行管理

    把编译安装的httpd 实现服务脚本,通过service和chkconfig 进行管理 1 编译安装httpd 把httpd编译安装在/app/httpd/目录下. 2 在/etc/rc.d/init ...

  2. 关于shiro权限管理的一些总结

    项目中最近开发用到了shiro,shiro作为一款轻量级的权限管理框架,在项目中主要想管理用户的登陆之后的页面访问,按钮,数据的显示.主要借用了shiro自己的页面权限标签. 当用户登录时->先 ...

  3. Java读取property配置文件

    读取配置文件已经成了Java程序员工作的一项必备技能. 配置文件的优点: 可维护性好 怎么个可维护性好呢? 它会让程序中变化的地方很灵活的配置,不需要修改代码. Java程序部署到服务器上去之后就变成 ...

  4. 【ALB学习笔记】基于.NET环境的高频RFID卡读写设备的基本操作案例

    基于.NET环境的高频RFID卡读写设备的基本操作案例 广东职业技术学院  欧浩源 1.引言 RFID高频卡在我们的日常生活中随处可见,是物联网应用中不可或缺的一个重要部分,也是全国职业院校技能大赛& ...

  5. Maven入门1-在Eclipse中新建Maven Web项目

    在eclipse中新建Maven Web项目 很多时候开发效率低下,大部分原因是IDE环境不熟悉.配置不会配置:因此在学习一项技能之前,有必要对基本的环境配置有所了解,正所谓磨刀不误砍柴工.这篇文章主 ...

  6. 全网首创ISE入门级教程

    转眼间我已经大三了,现在成为了实验室的负责人,对于下一届学生的纳新重任就交到了我的手上,想采取不同的方法暑假尽可能对他们进行一些培训,所以制作了此教程,说实话,在网上还没有找到关于ISE的入门级使用教 ...

  7. Java 数据类型在实际开发中应用二枚举

    在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的.在JDK1.5之前,人们用接口来描述这一种数据类型. 1. ...

  8. 【.net 深呼吸】在运行阶段修改应用配置文件

    上一篇博文中,老周所介绍的自行编写的配置类,虽然能够很好地做封装,但它仅允许修改用户级别的配置,所以文件都是保存到用户配置目录下的.可是,许多情况下,我们还是不考虑用户隔离,而是能够直接修改与应用程序 ...

  9. 机器学习 —— 基础整理（三）生成式模型的非参数方法： Parzen窗估计、k近邻估计；k近邻分类器

    本文简述了以下内容: (一)生成式模型的非参数方法 (二)Parzen窗估计 (三)k近邻估计 (四)k近邻分类器(k-nearest neighbor,kNN) (一)非参数方法(Non-param ...

  10. (转)Apache与Tomcat 区别联系

    Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...