Question

我正在开设一个网页，该网页会显示来自网络摄像头的静止图像，因此需要每15秒刷新一次。

我正在尝试在页面中实现一个倒数计时器，以显示页面何时刷新。

我在W3schools.com上找到了这个代码，并根据我的需要进行了更改，但这个倒计时器只会在用户按下开始按钮后启动。我想知道如何更改脚本以使计时器在页面加载时自动启动？

以下是代码：

<!DOCTYPE html>
<html>
<head>
<body>
<script>
function timedText() {
var x = document.getElementById('txt');
var t1 = setTimeout(function(){x.value = "15 seconds"},1000);
var t2 = setTimeout(function(){x.value = "14 seconds"},2000);
var t3 = setTimeout(function(){x.value = "13 seconds"},3000);
var t4 = setTimeout(function(){x.value = "12 seconds"},4000);
var t5 = setTimeout(function(){x.value = "11 seconds"},5000);
var t6 = setTimeout(function(){x.value = "10 seconds"},6000);
var t7 = setTimeout(function(){x.value = "9 seconds"},7000);
var t8 = setTimeout(function(){x.value = "8 seconds"},8000);
var t9 = setTimeout(function(){x.value = "7 seconds"},9000);
var t10 = setTimeout(function(){x.value = "6 seconds"},10000);
var t11 = setTimeout(function(){x.value = "5 seconds"},11000);
var t12 = setTimeout(function(){x.value = "4 seconds"},12000);
var t13 = setTimeout(function(){x.value = "3 seconds"},13000);
var t14 = setTimeout(function(){x.value = "2 seconds"},14000);
var t15 = setTimeout(function(){x.value = "1 seconds"},15000);
}
</script>
</head>
<body>

<form>
<input type="button" value="start" onclick="timedText()" />
<input type="text" id="txt" />
</form>


</body>
</html>

编辑：这是我页面中的原始代码：

<!DOCTYPE html>
<HTML>
<HEAD>
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
//   -->
</script>
<TITLE>Local MDOT Cam's-KD8NXH's Page-- Superior Twp., Michigan</TITLE>
<link rel="icon" 
type="image/ico" 
href="http://www.qsl.net/k/kd8nxh/favicon.ico">
<link rel="shortcut icon" href="http://www.qsl.net/k/kd8nxh/favicon.ico"       
type="image/icon"> <link rel="icon" href="http://www.qsl.net/k/kd8nxh/favicon.ico"  type="image/icon"> 
</head>
<body onload="JavaScript:timedRefresh(15000); timedText()">
<a href="http://www.qsl.net/kd8nxh/";"><img alt="" src="http://www.qsl.net/kd8nxh/BlueHomeButton.gif" style="width: 100px; height: 25px;" /></a>
<script>
window.onload = timedText;
function timedText() {
var txt = document.getElementById('txt'),
 counter = 15;
var timer = setInterval(function () {
 if(counter === 0) return clearInterval(timer);
 txt.value = counter + " seconds";
 counter--;
 }, 1000);
 }

<小时/>

Answer 1

把

window.onload = timedText;

在你的脚本中

。这将在页面加载后运行timedText函数。

顺便说一下，您的代码可以大大缩短：

＆＃13;

window.onload = timedText;
function timedText() {
   var txt = document.getElementById('txt'),
     counter = 15;
   var timer = setInterval(function () {
     if(counter === 0) return clearInterval(timer);
     txt.value = counter + " seconds";
     counter--;
   }, 1000);
}

＆＃13;

<input type="text" id="txt" />

＆＃13;

Answer 2

您可以将其添加到您的身体标签：

<body onload="timedText()">

这将在页面加载后立即运行

Answer 3

超时大约在估计的时间内运行，而不是确切的。实现它们的一个好方法是使用一个函数，该函数每秒使用 setTimeout 调用自身，并根据滞后的差异对时间进行微调。

e.g。倒数使用：

function countDown(seconds) {

  // Show the remaining seconds
  console.log(seconds);

  if (seconds > 0) {
    // Get time to just after next full second
    var lag = 1020 - new Date().getMilliseconds();
    setTimeout(function(){countDown(--seconds)}, lag);
  }
}

countDown(10);

通过记住它的启动时间并从那里进行计数，可以改善上述情况，我会留给你。 ; - ）

如何自动启动JavaScript倒数计时器

3 个答案: