第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

下載前倒計(jì)時(shí)僅適用于第一個(gè)按鈕

下載前倒計(jì)時(shí)僅適用于第一個(gè)按鈕

慕工程0101907 2024-01-18 10:47:31
我在下載前有一個(gè)帶有幾秒鐘計(jì)時(shí)器的下載按鈕,但不幸的是,它僅適用于第一個(gè)按鈕,而不適用于其他按鈕。我希望它能夠在每個(gè)下載按鈕上正常工作,但我不知道如何解決這個(gè)問(wèn)題。請(qǐng)幫忙!我附上了我一直在使用的 CSS、HTML 和 JavaScript。document.getElementById("download_button").addEventListener("click", function(event) {  event.preventDefault();  var timeleft = 3;  var downloadTimer = setInterval(function function1() {    document.getElementById('download').style.display = "none";    document.getElementById("timer").innerHTML = "Wait " + timeleft + "";    if (timeleft <= 0) {      clearInterval(downloadTimer);      document.getElementById("timer").innerHTML = ""      window.open(document.querySelector('#downloadbutton a').href, '_blank');      document.getElementById('download').style.display = "";    }    timeleft -= 1;  }, 1000);});.container {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  text-align: center;}#download_button {  border: none;  margin-top: 0px;  padding: 10px;  width: 200px;  font-family: "montserrat", sans-serif;  text-transform: uppercase;  border-radius: 6px;  cursor: pointer;  color: #fff;  font-size: 16px;  transition: 0.4s;  line-height: 28px;  outline: none;}.button-1 {  background: #f12711;}.button-2 {  background: #0575E6;}.button-3 {  background: #fe8c00;}#download_button:hover {  background: #000000;}.title {  font-weight: bold;}<div id="downloadbutton" style="text-align: center;">  <a href="http:///www.google.com">    <button id="download_button" class="button-1">          <div class="title">Document Title 1</div>          <div id="download">DOWNLOAD</div>          <div id="timer"></div>        </button>  </a></div><br><div id="downloadbutton" style="text-align: center;">  <a href="http:///www.google.com">    <button id="download_button" class="button-2">          <div class="title">Document Title 2</div>          <div id="download">DOWNLOAD</div>          <div id="timer"></div>        </button>  </a></div>
查看完整描述

1 回答

?
汪汪一只貓

TA貢獻(xiàn)1898條經(jīng)驗(yàn) 獲得超8個(gè)贊

使用不同 ID 的簡(jiǎn)單解決方案


function download(btn) {


  id = Number(btn.id.slice("downloadbutton".length+1))


  var timeleft = 3;


  var downloadTimer = setInterval(function function1() {

    document.getElementById('download' + id).style.display = "none";

    document.getElementById("timer" + id).innerHTML = "Wait " + timeleft + "";


    if (timeleft <= 0) {

      clearInterval(downloadTimer);

      document.getElementById("timer" + id).innerHTML = ""

      //window.open(document.querySelector('#downloadbutton' + id + ' a').href, '_blank');

      document.getElementById('download' + id).style.display = "";

    }

    timeleft -= 1;

  }, 1000);

}

.container {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

}


#download_button {

  border: none;

  margin-top: 0px;

  padding: 10px;

  width: 200px;

  font-family: "montserrat", sans-serif;

  text-transform: uppercase;

  border-radius: 6px;

  cursor: pointer;

  color: #fff;

  font-size: 16px;

  transition: 0.4s;

  line-height: 28px;

  outline: none;

}


.button-1 {

  background: #f12711;

}


.button-2 {

  background: #0575E6;

}


.button-3 {

  background: #fe8c00;

}


#download_button:hover {

  background: #000000;

}


.title {

  font-weight: bold;

}

<div id="downloadbutton1" style="text-align: center;">

    <button id="download_button1" class="button-1" onclick="download(this)">

              <div class="title">Document Title 1</div>

              <div id="download1">DOWNLOAD</div>

              <div id="timer1"></div>

            </button>

</div>

<br>

<div id="downloadbutton2" style="text-align: center;">

    <button id="download_button2" class="button-2" onclick="download(this)">

              <div class="title">Document Title 2</div>

              <div id="download2">DOWNLOAD</div>

              <div id="timer2"></div>

            </button>

</div>

<br>

<div id="downloadbutton3" style="text-align: center;">

    <button id="download_button3" class="button-3" onclick="download(this)">

              <div class="title">Document Title 3</div>

              <div id="download3">DOWNLOAD</div>

              <div id="timer3"></div>

            </button>

</div>


查看完整回答
反對(duì) 回復(fù) 2024-01-18
  • 1 回答
  • 0 關(guān)注
  • 123 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)