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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了js獲取瀏覽器和屏幕的各種寬度高度的方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JS請求servlet功能,結(jié)合具體實(shí)例形式分析了javascript使用ajax請求servlet端響應(yīng)的主要功能代碼與相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
Javascript判斷文件是否存在(客戶端/服務(wù)器端)
這篇文章主要介紹了Javascript判斷文件是否存在的方法適用于客戶端、服務(wù)器端，遠(yuǎn)程文件，示例代碼如下,需要的朋友可以參考下2014-09-09
用javascript實(shí)現(xiàn)的電信鐵通（網(wǎng)通）自動(dòng)跳轉(zhuǎn)源代碼
用javascript實(shí)現(xiàn)的電信鐵通（網(wǎng)通）自動(dòng)跳轉(zhuǎn)源代碼...2007-11-11
這篇文章主要介紹了js獲取當(dāng)前日期時(shí)間同時(shí)顯示星期的方法，具有參考價(jià)值，感興趣的小伙伴們可以參考一下2015-10-10
微信小程序?qū)崿F(xiàn)星級(jí)評價(jià)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評價(jià)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
JavaScript解構(gòu)賦值的5個(gè)常見場景與實(shí)例教程
解構(gòu)賦值是一種特殊的語法,它使我們可以將數(shù)組或?qū)ο蟆安鸢睘榈揭幌盗凶兞恐?因?yàn)橛袝r(shí)候使用變量更加方便,下面這篇文章主要給大家介紹了關(guān)于JavaScript解構(gòu)賦值的5個(gè)常見場景與實(shí)例的相關(guān)資料,需要的朋友可以參考下2021-11-11
兼容ie、firefox的圖片自動(dòng)縮放的css跟js代碼分享
最近編輯反應(yīng)，圖片有時(shí)候太大了，如果隱藏了，可能部分內(nèi)容別人就看不到了，如果手工設(shè)置圖片大小又太麻煩了，這里就提供一個(gè)方法讓也沒的圖片等比例縮放2013-08-08
js驗(yàn)證真實(shí)姓名與身份證號(hào)是否匹配
使用javascript技術(shù)驗(yàn)真實(shí)姓名，要用到unicode字符來匹配，由于中國人的姓名長度一般是在2-4這個(gè)范圍內(nèi)，所以重復(fù)匹配{2,4}次。接下來，通過本文給大家分享js驗(yàn)證省份證號(hào)與真實(shí)姓名是否匹配，需要的朋友可以參考下2015-10-10
這篇文章主要介紹了開源一個(gè)微信小程序儀表盤組件過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07