html倒计时时间在指定时间后没有停止

问题描述 投票:0回答:1

我不熟悉为博客博客编写代码并为其准备下载按钮的时间,但是在脚本中,计时器不会在10秒后停止。在此脚本中,下载按钮应仅在10秒后隐藏并显示。单击后,它会进入正常工作的页面网址中提供的链接。

第2个问题,第一个下载按钮在10秒内未隐藏,并且计数器未在此处停止,以下为代码:

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return (false);
}
var time = 10;
var page = getQueryVariable("pms");

function countDown() {
  time--;
  gett("timecount").innerHTML = time;
  if (time == 0) {

  }
}

function gett(id) {
  if (document.getElementById) return document.getElementById(id);
  if (document.all) return document.all.id;
  if (document.layers) return document.layers.id;
  if (window.opera) return window.opera.id;
}

function init() {
  if (gett('timecount')) {
    setInterval(countDown, 1000);
    gett("timecount").innerHTML = time;
  } else {
    setTimeout(init, 10);
  }
}
document.onload = init();
$(document).ready(function() {
  $('.link-out-btn').click(function() {
    window.location = page;
  });
  $('#linkout').text(page);
});

function closeWindow() {
  window.open('', '_parent', '');
  window.close();
}
#button1 {
  background-color: Blue;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
}

#button2 {
  background-color: white;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 7px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
}

.footer-credits {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="color: blue;"><span style="background-color: white; color: black; font-size: 16px; white-space: pre-wrap;"></span><b>&nbsp;</b></span><span style="color: blue;"><b><span style="color: red; font-size: large;">&nbsp;PLEASE WAITING...
    </span><span id="timecount" style="color: red; font-size: large;"></span><span style="color: red; font-size: large;"> s</span><span style="color: blue;">!&nbsp;</span></b>
</span><br/>
<button class="link-out-btn" id="button1">DOWNLOAD</button>
<button id="button2" onclick="javascript:closeWindow();">.</button>
html countdowntimer downloadfile
1个回答
-1
投票

相当几个问题。

研究下面的简化代码

我不确定id = linkout的元素应该是什么

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return "";
}
var time = 10;
var page = getQueryVariable("pms") || "not passed";
var tId;

function countDown() {
  time--;
  $("#time").html(time);
  if (time == 0) {
    clearInterval(tId)
    console.log("DONE");
    $('.link-out-btn').click(function() {
      window.location = page;
    });
  }
}


function init() {
  tId = setInterval(countDown, 1000);
  $("#time").html(time);
  $("#linkout").html(page);

}
$(document).ready(function() {
  init();
});

function closeWindow() {
  window.open('', '_parent', '');
  window.close();
}
#button1 {
  background-color: Blue;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 10px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
}

#button2 {
  background-color: white;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 7px 14px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  cursor: pointer;
}

.footer-credits {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p style="color: red; font-size: large;">&nbsp;PLEASE WAIT...
  <span id="time" style="color: red; font-size: large;"></span>s
  <span style="color: blue;">!&nbsp;</span>
  <button class="link-out-btn" id="button1">DOWNLOAD</button> page: <span id="linkout"></span>
  <button id="button2" onclick="closeWindow();">.</button>
</p>
© www.soinside.com 2019 - 2024. All rights reserved.