用JavaScript实现简单时间显示

蔚落 2022-07-13 06:24 196阅读 0赞

运用JavaScript技术，输出系统当前时间到指定位置。

代码：

<!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>当前系统时间</title>
    <link rel="stylesheet" href="style.css"  />
    <script language="javascript" type="text/javascript">
    
      window.onload = function(){
        showTime();
      }
      function checkTime(i){  //补位处理
        if(i<10){
            i='0'+i;
        }  
        return i;
      }
      function showTime(){
        var now=new Date();
        var year=now.getFullYear();
        var month=now.getMonth()+1;
        var day=now.getDate();
        var h=now.getHours();
        var m=now.getMinutes();
        var s=now.getSeconds();
        m=checkTime(m)
        s=checkTime(s)
    
    //显示星期
        var weekday=new Array(7)
        weekday[0]="星期日"
        weekday[1]="星期一"
        weekday[2]="星期二"
        weekday[3]="星期三"
        weekday[4]="星期四"
        weekday[5]="星期五"
        weekday[6]="星期六"
    
        document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+weekday[now.getDay()] +" "+h+":"+m+":"+s;
        t=setTimeout('showTime()',500)
      }
    
    </script>
    
    <style type="text/css">
    	.content
    	{
    		height:50px;
    		width:100%;
    		background:#B1E28D;
    	}
    	#show
    	{	
    		margin:0 auto;
    		text-align：center
    		height:50px;
    		line-height:50px;
    		width:500px;
    	}
    	
    </style>
    </head>
    
    <body>
    <div class="content">
      <div id="show">显示时间的位置</div>
    </div>
    </body>
    </html>

效果如下：

![20161228182534205][]

[20161228182534205]: /images/20220713/ef344b9cd0ac4a84a2da616ec0690466.png