1. 程式人生 > >通過js控制時間,一秒一秒自己動

通過js控制時間,一秒一秒自己動

1、第一種形式

1. <html>

2.   <head>

3.     <title>時間</title>

4.  <script type="text/javascript">

5. setInterval("showtime()", 1000);

6. function showtime() {

7. var date = new Date();

8. var time = date.getHours() + ":" + date.getMinutes() + ":"

9. + date.getSeconds();

10. document.getElementById(

"timeBox").value = time;

11. }

12. </script>

13.   </head>

14.   <body>

15.      <div style="text-align:center;">

16.             當前時間:<input type="text" name="timeBox" id="time" />

17.        </div>

18.   </body>

19. </html>

2、第二種形式

1. <html>

2.   <

head>

3.     <title>時間</title>

4.  <script type="text/javascript">

5. //獲得當前時間,刻度為一千分一秒      

6.  function showLeftTime() {         

7. var now = new Date();         

8. var year = now.getFullYear();         

9. var month = now.getMonth() + 1;         

10. var day = now.getDate();         

11. var hours = now.getHours();         

12. var minutes = now.getMinutes();         

13. var seconds = now.getSeconds();          

14.     document.all.show.innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + "";   

15. //document.getElementById("show").innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + "";         

16. 

17. //一秒重新整理一次顯示時間       

18.     setTimeout(showLeftTime, 1000);     

19.     }    

20. 

21. </script>

22.   </head>

23.   <body onload="showLeftTime()">

24.      <label id="show"></label><br/>

25.     <!--  <script type="text/javaScript">

26.         showLeftTime();

27.       </script> -->

28.   </body>

29. </html>