Question

我正在使用JavaScript创建一个数字时钟，并尝试使用setInterval（）每隔1000ms刷新一次时钟，但不是每1000ms后调用一次函数，它只在重新加载页面后调用该函数一次。什么是1000ms后调用功能的更好方法？

＆＃13;

// 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);

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

您正在定义函数之外的全局变量，包含它们并且它将起作用。

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>

Answer 2

从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;
}

Answer 3

请尝试关注JsFiddle：https://jsfiddle.net/fx0tyw0f/1/。变量没有改变，因为＆＃34; new Date（）＆＃34;初始化时只调用它们。在函数内部移动它将完成这项工作。

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);

如何在一段时间后重复调用函数

3 个答案: