時間間隔后如何重復調用函數
[英]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.