时间间隔后如何重复调用函数
[英]How to call function repeatedly after interval of time
问题描述
我正在用JavaScript制作数字时钟，并尝试使用setInterval（）每隔1000毫秒刷新一次时钟，但不是每隔1000毫秒调用一次函数，而是仅在重新加载页面后一次调用函数。 在1000毫秒后调用函数的更好方法是什么？
// 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 个解决方案
解决方案1
2 2018-05-04 12: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>
解决方案2
2 已采纳 2018-05-04 12: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;
}
解决方案3
1 2018-05-04 13: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);
一段时间后自动调用Javascript函数的正确方法是什么？
[英]what is the proper way to auto call function in Javascript after an interval of time?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.