欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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、不會編寫代碼？給你準(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)文章

最新評論