2020 用html做一个简单的时间显示（12小时制）

小咪咪 2022-11-21 01:14 304阅读 0赞

### 用前端html做一个简单的时间显示（12小时制） ###

**如图所示**

![在这里插入图片描述][20201029195140620.png_pic_center]  
显示年月日、时间、上下午以及星期几

功能：  
**1、  
此代码解决时间比如秒数 为单数时，在前面补0**

//值小于10时，在前面补0
    function dateFilter(date){ 
    	    if(date < 10){ return "0"+date;}
    	    return date;
    }

**2、  
新建Date对象，取得相应的值**

var today = new Date(); 
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var date = today.getDate();
    var hour = today.getHours();  //获得小时、分钟、秒
    var minute = today.getMinutes();
    var second = today.getSeconds();
    var apm="AM"; //显示上午: AM

**3、  
设置它每隔1秒调用自己的函数执行**

/*设置调用间隔*/
    var myTime = setInterval("fun_clock()",1000);

**4、完整代码**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>12小时时钟</title>
    <script type="text/javascript">
    
    //值小于10时，在前面补0
    function dateFilter(date){ 
    	    if(date < 10){ return "0"+date;}
    	    return date;
    }
    
    function fun_clock()
    { 
     var today = new Date(); 
     
     var year = today.getFullYear();
     var month = today.getMonth()+1;
     var date = today.getDate();
     var hour = today.getHours();  //获得小时、分钟、秒
     var minute = today.getMinutes();
     var second = today.getSeconds();
    
     var apm="AM"; //显示上午: AM
     if (hour>12) //按12小时制显示 在前端页面用html做一个简单的时间显示（12小时制）
     { 
        hour=hour-12;
        apm="PM"  ;
     }
     var weekday = 0;
     switch(today.getDay()){ 
        case 0:
          weekday = "星期日";
        break;
        case 1:
          weekday = "星期一";
        break;
        case 2:
          weekday = "星期二";
        break;
        case 3:
          weekday = "星期三";
        break;
        case 4:
          weekday = "星期四";
        break;
        case 5:
          weekday = "星期五";
        break;
        case 6:
          weekday = "星期六";
        break;
     }
    
      /*设置当前时间*/
     document.getElementById("myclock").innerHTML="你好，欢迎您！当前时间为："+year+"年"+month+"月"+date+"日 "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second)+" "+apm+" "+weekday;
    
    }
    /*设置调用间隔*/
    var myTime = setInterval("fun_clock()",1000);
    
    </script>
    </head>
    
    <body>
    
    <div id="myclock"></div>
    </body>
    </html>