Как повторно вызывать функцию после интервала времени - PullRequest
Новая
       28

Как повторно вызывать функцию после интервала времени

0 голосов
/ 04 мая 2018

Я делаю цифровые часы в JavaScript и пытаюсь обновить часы после каждых 1000 мс, используя setInterval (), но вместо вызова функции после каждых 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 ]

0 голосов
/ 04 мая 2018

Переместите свой код для вызова из 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;
}
0 голосов
/ 04 мая 2018

, пожалуйста, попробуйте следующее 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);
0 голосов
/ 04 мая 2018

Вы определяете свои глобальные переменные вне своей функции, включаете их, и это будет работать. 

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