原生JS實現的雙色球功能樣本，js雙色球樣本

最後更新：2018-02-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了原生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://tools.jb51.net/aideddesign/suijishu

線上隨機字元/隨機密碼產生工具：
http://tools.jb51.net/aideddesign/rnd_password

線上隨機數產生工具：
http://tools.jb51.net/aideddesign/rnd_num

線上隨機產生個人資訊資料工具：
http://tools.jb51.net/aideddesign/rnd_userinfo

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More