首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在一段时间后重复调用函数

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

Stack Overflow用户
提问于 2018-05-04 20:51:54
回答 3查看 64关注 0票数 0

我正在用JavaScript制作一个数字时钟,并尝试使用setInterval()每隔1000ms刷新一次时钟,但它不是每隔1000ms调用一次函数,而是仅在重新加载页面后调用该函数一次。在1000ms之后调用函数的更好的方法是什么?

代码语言:javascript
复制
// 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);
代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<!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>

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-05-04 20:55:18

移动要从setInterval调用的代码

代码语言:javascript
复制
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;
}
票数 2
EN

Stack Overflow用户

发布于 2018-05-04 20:55:00

你在你的函数之外定义了你的全局变量,把它们包含进来,它就会起作用。

代码语言:javascript
复制
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);
代码语言:javascript
复制
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;
}
代码语言:javascript
复制
<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
EN

Stack Overflow用户

发布于 2018-05-04 21:02:50

请尝试以下JsFiddle:https://jsfiddle.net/fx0tyw0f/1/。变量不会改变,因为"new Date()“只在初始化时调用。在函数内部移动它就可以完成这项工作。

代码语言:javascript
复制
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);
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50175430

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档