原生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 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
angularJs的ng-class切换class
Jun 23 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
Vue作用域插槽实现方法及作用详解
Jul 08 Javascript
Vue Render函数原理及代码实例解析
Jul 30 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安全配置详细说明
2011/09/26 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
使用php实现截取指定长度
2013/08/06 PHP
php实现天干地支计算器示例
2014/03/14 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
简单的JS时钟实例讲解
2016/01/13 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Python之list对应元素求和的方法
2018/06/28 Python
浅述python2与python3的简单区别
2018/09/19 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python调用并链接MATLAB脚本详解
2019/07/05 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
师范生个人推荐信
2013/11/29 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
工作失误检讨书
2015/01/26 职场文书
化妆品促销活动总结
2015/05/07 职场文书
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
Python 统计序列中元素的出现频度
2022/04/26 Python
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS