js 动态时钟

最新推荐文章于 2022-03-16 10:22:07 发布

indd

最新推荐文章于 2022-03-16 10:22:07 发布

阅读量724

点赞数

本文链接：https://blog.csdn.net/osdfhv/article/details/52926974

版权

引用块内容

这里写图片描述

这里写代码片<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>动态时钟</title>
        <style type="text/css">
        #time{
             position: absolute;
             left: 10%;
             top: 20%;
             width: 1000px;
             height: 400px;
             line-height: 400px;
             text-align: center;
             background: linear-gradient(#B66A3E,#4F4A72);
             box-shadow: 4px 7px #625068;
             border-radius:50px;
        }
            #time img{
                width: 132px;
                height: 134px;
                overflow: hidden;
                vertical-align: center;
                font-size: 24px;
                border: 3px solid #BC56DE;
                background: linear-gradient(#B66A3E,#4F4A72);               
            }
        </style>
    </head>
    <body onload="time()" >
        <div id="time">
        </div>
    </body>
    <script type="text/javascript">
         function time(){   
         var date=new Date();
         var hour=date.getHours();
         var minute=date.getMinutes();
         var second=date.getSeconds();
         var gg="AM";
         if(hour>12){
            gg="PM";
         }
         if(hour==0){
            hour=12;
         }
         if(minute<=9){
            minute="0"+minute;
         }
         if(second<=9){
            second="0"+second;
         }   
         var arr1=changePic(hour);
         var arr2=changePic(minute);
         var arr3=changePic(second);
//       var varTime="<span>"+hour+"点"+minute+"分"+second+"秒"+"&nbsp"+gg+"</span>";
         var vatImgTime="<img src=img/"+arr1[0]+".png/><img src=img/"+arr1[1]+".png/>";
             vatImgTime+="<img src=img/"+arr2[0]+".png/><img src=img/"+arr2[1]+".png/>";
             vatImgTime+="<img src=img/"+arr3[0]+".png/><img src=img/"+arr3[1]+".png/>";
         document.getElementById("time").innerHTML=vatImgTime;
         function  changePic(obj){
               return obj.toString().split("");
          }         
         }
       setInterval("time()",1000);

    </script>
</html>