如何在一段时间后重复调用函数
如何在一段时间后重复调用函数
提问于 2018-05-04 20:51:54
我正在用JavaScript制作一个数字时钟，并尝试使用setInterval()每隔1000ms刷新一次时钟，但它不是每隔1000ms调用一次函数，而是仅在重新加载页面后调用该函数一次。在1000ms之后调用函数的更好的方法是什么？
// Getting date method
var currentTime = new Date();
// Assigning variables
var hour = currentTime.getHours();
var min = currentTime.getMinutes();
var sec = currentTime.getSeconds();
// Getting html elements
var hourElement = document.getElementById("hour");
var minELement = document.getElementById("min");
var secElement = document.getElementById("sec");
function setClockTime() {
hourElement.innerHTML = hour;
minELement.innerHTML = min;
secElement.innerHTML = sec;
}
setInterval(setClockTime, 1000);body {
background: rgb(230, 230, 230);
}
.clock {
display: inline-block;
background: #000;
color: white;
font-size: 10em;
font-family: 'Courier New', Courier, monospace;
padding: 10px;
width: 192px;
text-align: center;
border-radius: 5px;
}
div {
width: 650px;
margin: 0 auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CLOCK</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<div class="container">
<p class="clock" id="hour">10</p>
<p class="clock" id="min">20</p>
<p class="clock" id="sec">30</p>
</div>
<script src="s.js"></script>
</body>
</html>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-05-04 20:55:18
移动要从setInterval调用的代码
function setClockTime(){
// Getting date method
var currentTime = new Date();
// Assigning variables
var hour = currentTime.getHours();
var min = currentTime.getMinutes();
var sec = currentTime.getSeconds();
// getting html elements
var hourElement = document.getElementById("hour");
var minELement = document.getElementById("min");
var secElement = document.getElementById("sec");
hourElement.innerHTML = hour;
minELement.innerHTML = min;
secElement.innerHTML = sec;
}Stack Overflow用户
发布于 2018-05-04 20:55:00
你在你的函数之外定义了你的全局变量，把它们包含进来，它就会起作用。
function setClockTime() {
//Getting date method
var currentTime = new Date();
//Assigning variables
var hour = currentTime.getHours();
var min = currentTime.getMinutes();
var sec = currentTime.getSeconds();
//getting html elements
var hourElement = document.getElementById("hour");
var minELement = document.getElementById("min");
var secElement = document.getElementById("sec");
hourElement.innerHTML = hour;
minELement.innerHTML = min;
secElement.innerHTML = sec;
}
setInterval(setClockTime, 1000);body {
background: rgb(230, 230, 230);
}
.clock {
display: inline-block;
background: #000;
color: white;
font-size: 10em;
font-family: 'Courier New', Courier, monospace;
padding: 10px;
width: 192px;
text-align: center;
border-radius: 5px;
}
div {
width: 650px;
margin: 0 auto;
}<div class="container">
<p class="clock" id="hour">00</p>
<p class="clock" id="min">00</p>
<p class="clock" id="sec">00</p>
</div>
Stack Overflow用户
发布于 2018-05-04 21:02:50
请尝试以下JsFiddle：https://jsfiddle.net/fx0tyw0f/1/。变量不会改变，因为"new Date()“只在初始化时调用。在函数内部移动它就可以完成这项工作。
function setClockTime(){
let currentTime = new Date();
//Assinig variables
let hour = currentTime.getHours();
let min = currentTime.getMinutes();
let sec = currentTime.getSeconds();
//getting html elements
let hourElement = document.getElementById("hour");
let minELement = document.getElementById("min");
let secElement = document.getElementById("sec");
hourElement.innerHTML = hour;
minELement.innerHTML = min;
secElement.innerHTML = sec;
}
setInterval(setClockTime,1000);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50175430
复制相关文章
相似问题
腾讯云开发者
