原生JS实现的双色球功能示例


Posted in Javascript onFebruary 02, 2018

本文实例讲述了原生JS实现的双色球功能。分享给大家供大家参考,具体如下:

先来看看运行效果:

原生JS实现的双色球功能示例

具体代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com - JS双色球</title>
  <style>
    #datePicker {
      width: 100px;
      height: 30px;
      line-height: 30px;;
      border-radius: 10px;
      border: 1px solid #5098a5;
      text-align: center;
      cursor: pointer;
    }
    #number {
      height: 100px;
      float: left;
      margin-top: 20px;
    }
    #number span {
      display: block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 30px;
      border: 2px solid red;
      color: red;
      font-weight: bold;
      float: left;
      margin-top: 15px;
      margin-right: 10px;
    }
    #buleBall {
      height: 100px;
      margin-top: 21px;
      float: left;
    }
    #buleBall span {
      display: block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 30px;
      background-color: blue;
      color: white;
      font-weight: bold;
      float: left;
      margin-top: 15px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
<div class="container">
  <div style="overflow:hidden;">
    <div id="number"></div>
    <div id="buleBall"></div>
  </div>
  <div id="datePicker">点击按钮</div>
</div>
<script>
  //循环产生1-36数字
  var arr = [];
  function num() {
    for (var i = 1; i < 34; i++) {
      arr.push(i);
    }
    confusion();
  }
  var arrty= new Array(arr);
  //伪随机方法
  function confusion(){
    for(var i=1;i<34;i++){
      arrty[i]=i;
    }
    arrty.sort(function(){ return 0.5 - Math.random() });
//    var str=arrty.join();
    arrAy()
  }
  // 将随机获取的数据添加到页面上去
  function arrAy() {
    var array = getRandomArrayElements(arrty, 6);
    array.sort(function (a, b) {//数组排序
      return a > b ? 1 : -1;
    });
    var htm = "";
    for (var i = 0; i < array.length; i++) {
      htm += '<span>' + array[i] + '</span>';
    }
    document.getElementById('number').innerHTML = htm;
  }
  // 从1-36中随机取出其中6个参数
  function getRandomArrayElements(arr, count) {
    var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index;
    while (i-- > min) {
      index = Math.floor((i + 1) * Math.random());
      temp = shuffled[index];
      shuffled[index] = shuffled[i];
      shuffled[i] = temp;
    }
    return shuffled.slice(min);
  }
  //随机获取一个蓝球的方法
  function blueBall() {
    var html = "";
    var array = [];
    for (var k = 1; k < 17; k++) {
      array.push(k);
    }
    //随机生成蓝色球的算法
    var n = Math.floor(Math.random() * array.length);
    if (n != "0") {//去除获取到的篮球数为0的
      html += '<span>' + n + '</span>';
    }
    document.getElementById('buleBall').innerHTML = html;
  }
  window.onload = function () {
    var datePicker = document.getElementById("datePicker");
    datePicker.onclick = function () {
      num();//点击按钮生成1-33的数字方法
      blueBall();//点击后获取随机蓝球的方法
    };
  }
</script>
</body>
</html>
Javascript 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
May 23 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 #jQuery
微信小程序实现列表下拉刷新上拉加载
Jul 29 #Javascript
微信小程序数字滚动插件使用详解
Feb 02 #Javascript
JS中的BOM应用
Feb 02 #Javascript
微信小程序实现文字跑马灯效果
May 26 #Javascript
微信小程序实现滚动消息通知
Feb 02 #Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 #Javascript
You might like
PHP 如何向 MySQL 发送数据
2006/10/09 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
JS中去掉array中重复元素的方法
2017/05/26 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
vue实现分页加载效果
2019/12/24 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
python利用urllib和urllib2访问http的GET/POST详解
2017/09/27 Python
如何在python中使用selenium的示例
2017/12/26 Python
python文本数据相似度的度量
2018/03/12 Python
Python实现简单http服务器
2018/04/12 Python
tensorflow 变长序列存储实例
2020/01/20 Python
使用K.function()调试keras操作
2020/06/17 Python
Django admin组件的使用
2020/10/24 Python
跟单文员的岗位职责
2013/11/14 职场文书
国贸专业个人求职信范文
2014/01/08 职场文书
美术毕业生求职信
2014/02/25 职场文书
石油工程专业毕业生求职信
2014/04/13 职场文书
健康状况证明模板
2014/10/23 职场文书
货款欠条范本
2015/07/03 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js