时间间隔后如何重复调用函数
[英]How to call function repeatedly after interval of time
问题描述
I am making a digital clock in JavaScript and am trying to refresh the clock after every 1000ms using setInterval() but instead of calling function after every 1000ms it calls the function only one time after reloading page. 
我正在用JavaScript制作数字时钟，并尝试使用setInterval（）每隔1000毫秒刷新一次时钟，但不是每隔1000毫秒调用一次函数，而是仅在重新加载页面后一次调用函数。 What's the better way to call function after 1000ms? 在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
You are defining your global variables outside your function, include them and it will work. 您正在函数外定义全局变量，将它们包括在内，它将起作用。
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
Move your code to be called from setInterval 从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
please try following JsFiddle: https://jsfiddle.net/fx0tyw0f/1/ . 请尝试遵循JsFiddle： https ://jsfiddle.net/fx0tyw0f/1/。 The variables are not changing because "new Date()" is called just ones on initialization. 变量没有改变，因为“ new Date（）”在初始化时仅被调用。 Moving it inside the function will do the job. 将其移动到函数内部即可完成工作。
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);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.