Hello, everyone. I am a rookie who has just taught myself JS for a few days. The question is very childish, please give me your advice.
requirement: a clock that is updated every second, such as: 08-21-21-29, with zeros in front of the digits.
my idea is to first get the hours, minutes, and seconds of time, and then convert them into strings, then correspond the subscript of the string to the subscript of the array of digital images, and then get a setInterval to execute every other second. The effect of
now is shown in the figure:
this effect looks normal at first glance, but it does not update the image automatically. Later, I used alert to output the time string and found that the timer was normal, but each time the output time was manually refreshed. When the timer was clearly put, why wouldn"t the time string be updated automatically? The
code is as follows:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.float{
float: left;
margin: 0 10px;
font-size: 30px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var imgs=document.getElementsByTagName("img");
var timeSting=null;
var now=new Date();
setInterval(function(){
function add0(h,min,s) {
var n="0";
for (var i = 0; i <3; iPP) {
if (arguments[i]<10) {
arguments[i]=n+arguments[i];
}
}
return h+min+s;
}
timeSting=add0(now.getHours(),now.getMinutes(), now.getSeconds());
for (var i = 0; i < 6; iPP) {
imgs[i].src="./number/"+timeSting[i]+".gif";
}
},1000);
}
</script>
</head>
<body>
<img class="float" src="">
<img class="float" src="">
<div class="float">:</div>
<img class="float" src="">
<img class="float" src="">
<div class="float">:</div>
<img class="float" src="">
<img class="float" src="">
</body>
</html>