I'm asking you this question because there are parts of the online lecture assignment that cannot be solved.ㅠ<
I tried to make the clock work with the setInterval, but why not?
https://codepen.io/dduvely/pen/ELYPzo
It's the chords!
fast-frontend setinterval
Hello Suzy, ~ ^-^~ I'm answering the questions you asked.
First, setInterval() has no problem with operation. The problem was somewhere else. :-)
The problem will be solved by modifying the code as follows. After reading the code, let's talk about what caused the problem and how to solve it.
// -----------------------------------------------------------------------------
// Suzy's code
// -----------------------------------------------------------------------------
// // var date_obj = new Date();
// // var current_hours = Number(date_obj.getHours());
// // var current_minutes = Number(date_obj.getMinutes());
// // var current_seconds = Number(date_obj.getSeconds());
// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------
// Modified code
// : Change variable to function
// -----------------------------------------------------------------------------
var currentHours = function(){ return Number(new Date().getHours()) };
var currentMinutes = function(){ return Number(new Date().getMinutes()) };
var currentSeconds = function(){ return Number(new Date().getSeconds()) };
// -----------------------------------------------------------------------------
var hour_hand = document.getElementsByClassName('hour-hand')[0]
var minute_hand = document.getElementsByClassName('minute-hand')[0]
var second_hand = document.getElementsByClassName('second-hand')[0]
// -----------------------------------------------------------------------------
// Modified code
// : Change from variable to function call code
//
// e.g. current_hours c currenthours()
// -----------------------------------------------------------------------------
function hourDesign() {
hour_hand.style.transform = 'rotate(' + 30 * currentHours() + 'deg)';
}
function minuteDesign() {
minute_hand.style.transform = 'rotate(' + 6 * currentMinutes() + 'deg)';
}
function secondDesign() {
second_hand.style.transform = 'rotate(' + 6 * currentSeconds() + 'deg)';
}
setInterval() was not the cause of the problem. If you check inside the timeRoad() function through the console.log() code, you can see that the function is normally called every 1 second.
Then? What is the cause of the problem?
The reason was that the time-getting code would only be performed once when loaded.
To create a clock, you need to get a time information value that changes continuously, but the value assigned to the variable was processed only once when it was loaded, so it seemed to stop because the value did not change over time. :-)
var date_obj = new Date();
var current_hours = Number(date_obj.getHours());
var current_minutes = Number(date_obj.getMinutes());
var current_seconds = Number(date_obj.getSeconds());
This problem can be handled by reassigning the value whenever the time changes continuously. That's right! You'll think you need to reuse it. Yes, that's right! The function is required.
Change the code that was assigned only once using the variable to a function that returns the changed time information every call.
var currentHours = function(){ return Number(new Date().getHours()) };
var currentMinutes = function(){ return Number(new Date().getMinutes()) };
var currentSeconds = function(){ return Number(new Date().getSeconds()) };
Finally, change to the function internal code that was processing hours, minutes, and secondsto the code that calls each function that gets the current time information. :-)
function hourDesign() {
hour_hand.style.transform = 'rotate(' + 30 * currentHours() + 'deg)';
}
function minuteDesign() {
minute_hand.style.transform = 'rotate(' + 6 * currentMinutes() + 'deg)';
}
function secondDesign() {
second_hand.style.transform = 'rotate(' + 6 * currentSeconds() + 'deg)';
}
Ta-da! Now the problem is solved, and the clock will see the second hand moving~ Yes! :-)
It was a problem that occurred because the value assigned to the variable was processed only once. This problem could be solved using a function. It was a process of solving the importance and necessity of functions again. :-)
FIN.
© 2024 OneMinuteCode. All rights reserved.