原生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 相关文章推荐
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
解决vue的touchStart事件及click事件冲突问题
Jul 21 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
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
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
PHP多态代码实例
2015/06/26 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
php pdo操作数据库示例
2017/03/10 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
2015/05/12 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
Vue.js实现列表清单的操作方法
2017/11/15 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
2018/08/11 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
详解vue v-model
2020/08/31 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python mysqldb连接数据库
2009/03/16 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python实现简单成绩录入系统
2019/09/19 Python
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
2014/06/23 HTML / CSS
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
车间操作工岗位职责
2013/12/19 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
优质服务活动实施方案
2014/05/02 职场文书
经济类毕业生求职信
2014/06/26 职场文书
学习考察心得体会
2014/09/04 职场文书
项目经理岗位职责
2015/01/31 职场文书
小学教师读书笔记
2015/07/01 职场文书
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python