一，简陋的数字时钟 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>数字时钟</title>
 6   <style>
 7     #cont{
 8       font-family: 楷体;
 9       font-size: 25px;
10       font-color:pink;
11       height: 25px;
12       width: auto;
13       line-height: 25px;
14       border: yellowgreen solid 2px;
15       position: absolute;
16       top: 50px;
17       left: 50px;
18     }
19   </style>
20 </head>
21 <body>
22 <div id="cont"></div>
23 <script type="text/javascript">
24   var div=document.getElementById('cont')
25 
26   function getTime(){         
27     var date=new Date();//获取时间
28     
29 //把所有获得的时间放入对应的变量中
30     var year=date.getFullYear();
31     var month=date.getMonth()+1; //月份要加1
32     var day=date.getDate();
33 
34     var hour=date.getHours();
35     var minute=date.getMinutes();
36     var second=date.getSeconds();
37 
38     //这样写显示时间在1~9会挤占空间；所以要在1~9的数字前补零;
39     if (hour<10) {
40       hour='0'+hour;
41     }
42     if (minute<10) {
43       minute='0'+minute;
44     }
45     if (second<10) {
46       second='0'+second;
47     }
48 
49     var x=date.getDay();//获取星期
50     var time=year+'/'+month+'/'+day+'/'+hour+':'+minute+':'+second;
51     div.innerHTML=time;//将时间显示在div内
52   }
53 
54   setInterval(getTime,1000);
55 
56 </script>
57 </body>
58 </html>

实现效果

 

posted @ 2022-02-22 19:07  椿c  阅读(24)  评论(0)    收藏  举报