js實現(xiàn)雙色球效果
更新時間：2020年08月02日 11:43:03 作者：Mr.王征
這篇文章主要為大家詳細介紹了js實現(xiàn)雙色球效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
支持多瀏覽器(IE、Firefox、Opera)剪切板復(fù)制函數(shù)_腳本之家修正版
有朋友要剪切板復(fù)制函數(shù)，可網(wǎng)上的好多代碼都是不能運行的，各種其它符號，導(dǎo)致了腳本的不可運行，腳本之家站長特整理了下，修正了錯誤。2008-12-12
詳解CocosCreator項目結(jié)構(gòu)機制
這篇文章主要介紹了詳解CocosCreator項目結(jié)構(gòu)機制，只有了解這些機制后，才能更好的進行項目開發(fā)，避免潛在錯誤，并且快速的除錯2021-04-04
JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法
本文給大家簡單總結(jié)了下JavaScript和jquery獲取父級元素、子級元素、兄弟元素的方法，非常的簡單實用，有需要的小伙伴可以參考下2016-06-06
引入 TypeScript 到 Electron 項目可以幫助你捕捉錯誤并在編寫代碼時提供更好的自動完成和文檔，這篇文章主要介紹了electron使用typescript的步驟,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了如何利用HTML、CSS?和?JavaScript?制作紙牌記憶游戲，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起動手嘗試一下2022-04-04
這篇文章主要介紹了JavaScript 鏈表定義與使用方法,結(jié)合實例形式分析了JavaScript 鏈表的基本功能、定義與使用方法,需要的朋友可以參考下2020-04-04
JavaScript常用函數(shù)工具集：lao-utils
現(xiàn)在Javascript庫海量，流行的也多，比如jQuery，YUI等，雖然功能強大，但也是不萬能的，功能不可能涉及方方面面，這里給大家分享一個的JS庫是對這些的補充，很多也比較實用，把應(yīng)用到項目中中去也比較方面，這也是對工作的一些積累，也加深對知識的理解。2016-03-03
這篇文章主要介紹了ES6中Symbol類型用法,結(jié)合實例形式分析了Symbol類型的功能、使用方法與相關(guān)注意事項,需要的朋友可以參考下2017-04-04
JavaScript Title、alt提示（Tips）實現(xiàn)源碼解讀
我們知道給某些HTML標簽加上title屬性后，這個標簽對象在瀏覽的時候，鼠標移上去就會有一個小提示框出來，并顯示title定義的內(nèi)容。2010-12-12
這篇文章主要介紹了在小程序中使用canvas的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09