成人在线亚洲_国产日韩视频一区二区三区_久久久国产精品_99国内精品久久久久久久

您的位置:首頁技術(shù)文章
文章詳情頁

JavaScript實(shí)現(xiàn)刮刮樂效果

瀏覽:4日期:2023-06-15 14:46:01

刮刮樂怎么做?

本文實(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)容

JavaScript實(shí)現(xiàn)刮刮樂效果

5、最終網(wǎng)頁顯示界面如下JavaScript實(shí)現(xiàn)刮刮樂效果JavaScript實(shí)現(xiàn)刮刮樂效果JavaScript實(shí)現(xiàn)刮刮樂效果

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章: