JavaScript 制作12小时进制的时钟特效

68 阅读 0 评论 45 点赞

我是靠谱客的博主心灵美红酒，最近开发中收集的这篇文章主要介绍JavaScript 制作12小时进制的时钟特效，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

今天分享一个javaScript制作12进制时钟特效的小题。
代码如下
制作12进制的时钟特效

> <!DOCTYPE html> <html> <head lang="en">
>     <meta charset="UTF-8">
>     <title>制作12进制的时钟特效</title> </head> <body> <div id="myclock"></div> <script type="text/javascript">
> 
>     function clock_12h()
>     {
>         var today = new Date(); //获得当前时间
>         //获得年、月、日，Date()函数中的月份是从0－11计算
>         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小时制显示
>         {
>             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;
>         }
> 
>         /*设置div的内容为当前时间*/
>         document.getElementById("myclock").innerHTML="<h2>你好，欢迎访问！</h2><h2>"+year+"年"+month+"月"+date+"日&nbsp;"+hour+":"+minute+":"+second+"&nbsp;"+apm+"&nbsp;"+weekday+"</h2>";
> 
>     }
>     /*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
>     var myTime = setInterval("clock_12h()",1000);
> 
> </script> </body> </html>