search

Home >Web Front-end >JS Tutorial >js controls the time to move automatically every second

js controls the time to move automatically every second

小云云
小云云Original
2018-01-22 09:36:152213browse

This article mainly brings you an example of controlling time through js and moving it by itself second by second. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

1. The first form 

 <html>
 <head>
 <title>时间</title>
 <script type="text/javascript">
setInterval("showtime()", 1000);
function showtime() {
var date = new Date();
var time = date.getHours() + ":" + date.getMinutes() + ":"
+ date.getSeconds();
document.getElementById("timeBox").value = time;
}
</script>
 </head>
 <body>
 <p style="text-align:center;">
  当前时间：<input type="text" name="timeBox" id="time" />
 </p>
 </body>
</html>

2. The second form 

<html>
 <head>
 <title>时间</title>
 <script type="text/javascript">
 //获得当前时间,刻度为一千分一秒 
 function showLeftTime() {  
 var now = new Date();  
 var year = now.getFullYear();  
 var month = now.getMonth() + 1;  
 var day = now.getDate();  
 var hours = now.getHours();  
 var minutes = now.getMinutes();  
 var seconds = now.getSeconds();  
 document.all.show.innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + ""; 
 //document.getElementById("show").innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + "";  
  
 //一秒刷新一次显示时间 
 setTimeout(showLeftTime, 1000); 
 } 
 
 </script> 
 </head>
 <body onload="showLeftTime()">
 <label id="show"></label><br/>
 <!-- <script type="text/javaScript">
 showLeftTime();
 </script> -->
 </body>
</html>

Related recommendations:

Detailed explanation of js time Conversion method between stamp and date format

js time control only displays year and month

JS time countdown

The above is the detailed content of js controls the time to move automatically every second. For more information, please follow other related articles on the PHP Chinese website!

JS
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to achieve quick positioning on the page with JS (anchor jump problem)Next article：How to achieve quick positioning on the page with JS (anchor jump problem)

Related articles

See more