码迷,mamicode.com
首页 > Web开发 > 详细

js实现12小时时钟

时间:2016-05-26 23:19:10      阅读:1977      评论:0      收藏:0      [点我收藏+]

标签:

 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小时时钟

标签:

原文地址:http://www.cnblogs.com/jimorulang/p/5533079.html

(0)
(3)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!