欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-09 11:42:52
本文实例讲述了原生js实现的双色球功能。分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: ...

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

先来看看运行效果:

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

具体代码如下:

<!doctype html>
<html>
<head lang="en">
  <meta charset="utf-8">
  <title>www.jb51.net - 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>

ps:这里再为大家提供几款相关在线工具供大家参考使用:

在线随机数字/字符串生成工具:

在线随机字符/随机密码生成工具:

在线随机数生成工具:

在线随机生成个人信息数据工具:

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript数组操作技巧总结》、《javascript排序算法总结》、《javascript遍历算法与技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结

希望本文所述对大家javascript程序设计有所帮助。