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