今天看啥
    热点:

      天发国际娱乐官网:  检察机关在审查起诉阶段,依法告知了被告人刘明刚享有的诉讼权利,并依法讯问了被告人刘明刚,听取了其辩护人的意见。

      原生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:这里再为大家提供几款相关在线工具供大家参考使用:

      在线随机数字/字符串生成工具:
      http://www.1click-soft.com/tfgjylgw/aideddesign/suijishu

      在线随机字符/随机密码生成工具:
      http://www.1click-soft.com/tfgjylgw/aideddesign/rnd_password

      在线随机数生成工具:
      http://www.1click-soft.com/tfgjylgw/aideddesign/rnd_num

      在线随机生成个人信息数据工具:
      http://www.1click-soft.com/tfgjylgw/aideddesign/rnd_userinfo

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

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

      www.1click-soft.comtruehttp://www.1click-soft.com/Javascript/1300672.htmlTechArticle原生JS实现的双色球功能示例,js双色球示例 本文实例讲述了原生JS实现的双色球功能。分享给大家供大家参考,具体如下: 先来看看运行...

      相关文章

      相关搜索: JS 双色球

      帮客评论

      视觉看点
      百度 360 搜狗