原生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 查找select ,并触发事件的实现代码
Mar 30 Javascript
js实现感应鼠标图片透明度变化的方法
Feb 20 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 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下对字符串的递增运算代码
2010/08/21 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
初识PHP
2014/09/28 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
node.js中的fs.open方法使用说明
2014/12/17 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
NodeJs基本语法和类型
2015/02/13 NodeJs
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
python 用下标截取字符串的实例
2018/12/25 Python
详解【python】str与json类型转换
2019/04/29 Python
Django 过滤器汇总及自定义过滤器使用详解
2019/07/19 Python
python线程的几种创建方式详解
2019/08/29 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
QML用PathView实现轮播图
2020/06/03 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
SISLEY希思黎官方旗舰店:享誉全球的奢华植物美容品牌
2018/04/25 全球购物
个人现实表现材料
2014/02/04 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
2015年元旦主持词开场白
2014/12/14 职场文书
长城的导游词
2015/01/30 职场文书
健康证明
2015/06/19 职场文书
小学英语课教学反思
2016/02/15 职场文书