代码之家 › 专栏 › 技术社区 › Kartik

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

clock timer function html javascript

Kartik · 技术社区 · 6 年前

我正在用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 回复 | 直到 6 年前

mplungjan Gvidas 6 年前

移动要从中调用的代码 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;
}

mplungjan Gvidas 6 年前

你在你的函数之外定义你的全局变量,包括它们,它就会起作用。

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>

Miroslav Savovski 6 年前

请尝试以下JSFIDLE: 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);