gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 17:09:12 27 4
gpt4 key购买 nike

我正在制作一个网页,该网页将显示来自网络摄像头的静止图像,因此需要每 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);
}


最佳答案

window.onload = timedText;

在你的脚本中。这将在页面加载后运行 timedText 函数。


顺便说一句,您的代码可以大大缩短:

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);
}
<input type="text" id="txt" />

关于javascript - 如何自动启动 JavaScript 倒数计时器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27350267/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com