站長資訊網(wǎng)
本文實例為大家分享了js實現(xiàn)雙色球效果的具體代碼，供大家參考，具體內(nèi)容如下
效果展示：
源碼展示：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js實現(xiàn)雙色球效果</title> <style> span{ font-size: 20px; } .a { color: red; } .b { color: blue; } </style> </head> <body> <button>點擊獲取今日雙色球數(shù)</button> <pre> <span class="a"></span><span class="b"></span> </pre> <script> var arrS = []; for (let i = 1; i < 34; i++) { arrS[i - 1] = i; } var spans = document.querySelectorAll("span"); document.querySelector("button").onclick = function () { /*es6 使用 set 集合會自動去除重復(fù)*/ /*獲取紅球*/ let set = new Set(); while (set.size < 6) { set.add(getR(arrS, arrS.length)); } /*獲取籃球*/ let set1 = new Set(); while (set1.size < 1) { set1.add(getR(arrS, 16)); } var hong = ""; var lan = ""; for (let v of set) { hong += v; hong += " "; } for (let v of set1) { lan += v; lan += " "; } //將內(nèi)容添加到頁面上 spans[0].innerText = hong; spans[1].innerText = lan; } // 獲取指定范圍內(nèi)的隨機數(shù) function getR(arr, al) { return arr[Math.floor(Math.random() * al)]; } </script> </body> </html>
相關(guān)學(xué)習(xí)推薦：javascript教程
