
在之前的项目中有做到需要在网页中实时显示当前时间,实现的效果如图所示:

1. html结构
<p class="col-xs-12 col-sm-6"> <i class="fa fa-plus-square-o" aria-hidden="true"></i> <span id="current-time"></span> </p>
2. JS
/*实时显示时间*/
 function showtime(){
 var today,hour,second,minute,year,month,date;
 var strDate ;
 today=new Date();
 var n_day = today.getDay();
 switch (n_day){
 case 0:{
 strDate = "星期日"
 }break;
 case 1:{
 strDate = "星期一"
 }break;
 case 2:{
 strDate ="星期二"
 }break;
 case 3:{
 strDate = "星期三"
 }break;
 case 4:{
 strDate = "星期四"
 }break;
 case 5:{
 strDate = "星期五"
 }break;
 case 6:{
 strDate = "星期六"
 }break;
 case 7:{
 strDate = "星期日"
 }break;
 }
 year = today.getFullYear();
 month = today.getMonth()+1;
 date = today.getDate();
 hour = today.getHours();
 minute =today.getMinutes();
 second = today.getSeconds();
 
 if (month >= 1 && month <= 9) {
 month = "0" + month;
 }
 if (date >= 0 && date <= 9) {
 date = "0" + date;
 }
 if (hour >= 0 && hour <= 9) {
 hour = "0" + hour;
 }
 if (minute >= 0 && minute <= 9) {
 minute = "0" + minute;
 }
 if (second >= 0 && second <= 9) {
 second = "0" + second;
 }
 document.getElementById('current-time').innerHTML ="当前时间:"+ year + "年" + month + "月" + date + "日" +" "+ strDate +" " + hour + ":" + minute + ":" + second; //显示时间
 setTimeout("showtime();", 1000); //设定函数自动执行时间为 1000 ms(1 s)
}