js实现12小时时钟

Posted 如风105

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现12小时时钟相关的知识,希望对你有一定的参考价值。

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>制作12小时进制的时钟</title>
 6 <script type="text/javascript">
 7 
 8 function clock_12h()
 9 {
10  var today = new Date(); //获得当前时间
11  //获得年、月、日,Date()函数中的月份是从0-11计算
12  var year = today.getFullYear();  
13  var month = today.getMonth()+1;
14  var date = today.getDate();
15  var hour = today.getHours();  //获得小时、分钟、秒
16  var minute = today.getMinutes();
17  var second = today.getSeconds();
18  
19  var apm="AM"; //默认显示上午: AM
20  if (hour>12) //按12小时制显示
21  {
22     hour=hour-12;
23     apm="PM"  ;
24  }
25  var weekday = 0;
26  switch(today.getDay()){
27     case 0:
28       weekday = "星期日";
29     break;
30     case 1:
31       weekday = "星期一";
32     break;
33     case 2:
34       weekday = "星期二";
35     break;
36     case 3:
37       weekday = "星期三";
38     break;
39     case 4:
40       weekday = "星期四";
41     break;
42     case 5:
43       weekday = "星期五";
44     break;
45     case 6:
46       weekday = "星期六";
47     break;
48  }
49  
50   /*设置div的内容为当前时间*/
51  document.getElementById("myclock").innerHTML="<h2>你好,欢迎访问贵美商城!</h2><h2>"+year+"年"+month+"月"+date+"日&nbsp;"+hour+":"+minute+":"+second+"&nbsp;"+apm+"&nbsp;"+weekday+"</h2>";
52 
53 }
54 /*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
55 var myTime = setInterval("clock_12h()",1000);
56 
57 </script>
58 </head>
59 
60 <body>
61 <div id="myclock"></div>
62 </body>
63 </html>

以上是关于js实现12小时时钟的主要内容,如果未能解决你的问题,请参考以下文章

如何将 tktimepicker 默认时钟类型从 12 小时更改为 24 小时?

Quartus 12 小时时钟(同步)

使用OpenGL绘制时钟的小时标记

c_cpp 12小时时钟乘法 - GeeksforGeeks

如何在基于Canvas的模拟时钟中组装以下代码库,Clockface有28小时112分钟

AEJoy —— 表达式之模拟计时时钟JS