JS实现动态显示当前时间

Posted 2020-06-15

效果图：

代码实现：

 1  <script language="javascript">
 2                     var timerID = null;
 3                     var timerRunning = false;
 4                     function stopclock() {
 5                         if (timerRunning)
 6                             clearTimeout(timerID);
 7                         timerRunning = false;
 8                     }
 9                     function startclock() {
10                         stopclock();
11                         showtime();
12                     }
13                     function showtime() {
14                         var now = new Date();
15                         var year = now.getFullYear();
16                         var month = now.getMonth() + 1;
17                         var day = now.getDate();
18                         var hours = now.getHours();
19                         var minutes = now.getMinutes();
20                         var seconds = now.getSeconds()
21                         var timeValue = "系统时间: " + year + "-" + ((month >= 10) ? month : "0" + month) + "-" + ((day >= 10) ? day : "0" + day) + "  ";
22                         
23                         timeValue += ((hours < 10) ? "0":"")+hours
24                         timeValue += ((minutes < 10) ? ":0" : ":") + minutes
25                         timeValue += ((seconds < 10) ? ":0" : ":") + seconds
26                         document.clock.thetime.value = timeValue;
27                         timerID = setTimeout("showtime()", 1000);
28                         timerRunning = true;
29                     }
30 
31                 </script>

1 <form name="clock" style="float:right;width:360px;padding-top:5px;">
2     <span style="vertical-align: central;">
3        <input name="thetime" size="30" style="font-size: 14px; background-color: transparent; border: 0; color: #49d1fe ; font-weight: 600; ">
4     </span>
5  </form>