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

news/2024/7/19 14:48:23 标签: javascript, html, js

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

如图所示

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

功能：
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/html" title=javascript>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>