JavaScript實(shí)現(xiàn)刮刮樂效果
更新時(shí)間：2020年11月01日 15:15:20 作者：藍(lán)小安
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)刮刮樂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
刮刮樂怎么做？
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)刮刮樂效果的具體代碼，供大家參考，具體內(nèi)容如下
來這我教你
1、首先準(zhǔn)備好編程軟件webStorm或者eclipse都行
2、不會(huì)編寫代碼？給你準(zhǔn)備好了
3、如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
height: 90px;
width: 300px;
margin: 0 auto;
margin-top: 5px;
}
.box{
height: 70px;
width: 70px;
background-color: darkgray;
line-height: 70px;
text-align: center;
display: inline-block;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="outer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="outer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="outer">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<script>
var boxs = document.getElementsByClassName("box");
var item = ["一等獎(jiǎng)","二等獎(jiǎng)","三等獎(jiǎng)","謝謝","謝謝","謝謝","謝謝","謝謝","謝謝",];
for (var i = 0;i<boxs.length;i++){
var box = boxs[i];
box.onclick = function (){
this.style.backgroundColor="red";
//this.innerText="一等獎(jiǎng)"；//隨即從數(shù)組中獲取內(nèi)容，并且不能重復(fù)！
var number = Math.floor(Math.random()*9);
this.innerText = item[number];
this.style.color = "#fff";
this.style.verticalAlign = "top";
}
}
</script>
</body>
</html>
4、這個(gè)部分的代碼塊文字內(nèi)容可以自定義，改寫成你想要顯示的內(nèi)容
5、最終網(wǎng)頁顯示界面如下
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法完整示例
這篇文章主要介紹了JS動(dòng)態(tài)圖片的實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了JavaScript鼠標(biāo)響應(yīng)與頁面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)橫屏簽字版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
JavaScript中的純函數(shù)與偏函數(shù)你了解嗎
JS中，純函數(shù)指在相同的輸入下始終產(chǎn)生相同的輸出并且沒有副作用的函數(shù)，偏函數(shù)指一種創(chuàng)建新函數(shù)的方法，通過預(yù)設(shè)一個(gè)或多個(gè)參數(shù)從而實(shí)現(xiàn)對原始函數(shù)的封裝和定制，本文主要來講講純函數(shù)與偏函數(shù)的一些使用，需要的可以參考一下2023-05-05
javascript實(shí)現(xiàn)將文件保存到本地方法匯總
本文給大家匯總介紹了3中使用javascript實(shí)現(xiàn)將文件保存到本地的方法，非常的簡單實(shí)用，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要為大家詳細(xì)介紹了JS+CSS實(shí)現(xiàn)3D切割輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
Bootstrap的popover(彈出框)在append后彈不出(失效)
這篇文章主要介紹了Bootstrap的popover(彈出框)在append后彈不出，失效的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript實(shí)現(xiàn)視頻轉(zhuǎn)GIF的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)視頻轉(zhuǎn)GIF,本文一共會(huì)按照以下三步去實(shí)現(xiàn)一個(gè)視頻轉(zhuǎn)?GIF?功能,解封裝視頻,從視頻文件中獲取視頻幀,解碼視頻幀,獲取幀圖像信息,拼裝幀圖像信息,生成?GIF,需要的朋友可以參考下2024-03-03
every?和?some?都是數(shù)組迭代方法,都可以遍歷數(shù)組,這篇文章主要介紹了JS中some和every的區(qū)別和用法,需要的朋友可以參考下2023-05-05
mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能示例
這篇文章主要介紹了mock.js實(shí)現(xiàn)模擬生成假數(shù)據(jù)功能,結(jié)合實(shí)例形式分析了mock.js插件生成模擬數(shù)據(jù)的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Bootstrap在線電子商務(wù)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目5
這篇文章主要為大家分享了Bootstrap在線電子商務(wù)網(wǎng)站實(shí)戰(zhàn)項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10