Js实现时钟效果

摘要:在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。

在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。


代码例子:

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="author" content="惊风" />
        <meta name="Genarator" content="sublime"/>
    <title>时间的实现</title>
    <style type="text/css">
       #timetxt{
             width:100px;
             height:40px;
             background-color:#EABC46;
             font-size:20px;
             line-height:40px;
             margin:auto auto;
             text-align:center;
       }
    </style>
    <script type="text/javascript">
       function startTime(){

          var today=new Date(); //定义时间
          var h=today.getHours();  //小时
          var m=today.getMinutes();  //分钟
          var s=today.getSeconds();  //秒
 
          //调用函数
           h=checkTime(h);

           m=checkTime(m);

           s=checkTime(s);

          document.getElementById("timetxt").innerHTML=h+":"+m+":"+s; //时间显示的格式
          t=setTimeout(function(){

            startTime();

          },500);//500,是延时显示的意思,即500毫秒更新一次

       }
 
       //当分钟和秒是一位时候,需要在前面加0(才更符合要求)
       function checkTime(i){

         if(i<10){

           i="0"+i;

         }

         return i;

       }

       </script>
</head>
    <body onload="startTime()">
       <div id="timetxt"></div>
    </body>
</html>


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_4422