• JavaScript时钟效果


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

      代码例子:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4         <meta charset="UTF-8">
     5         <meta name="author" content="惊风" />
     6         <meta name="Genarator" content="sublime"/>
     7     <title>时间的实现</title>
     8     <style type="text/css">
     9        #timetxt{
    10              width:100px;
    11              height:40px;
    12              background-color:#EABC46;
    13              font-size:20px;
    14              line-height:40px;
    15              margin:auto auto;
    16              text-align:center;
    17        }
    18     </style>
    19     <script type="text/javascript">
    20        function startTime(){
    21 
    22           var today=new Date(); //定义时间
    23           var h=today.getHours();  //小时
    24           var m=today.getMinutes();  //分钟
    25           var s=today.getSeconds();  //
    26  
    27           //调用函数
    28            h=checkTime(h);
    29 
    30            m=checkTime(m);
    31 
    32            s=checkTime(s);
    33 
    34           document.getElementById("timetxt").innerHTML=h+":"+m+":"+s; //时间显示的格式
    35           t=setTimeout(function(){
    36 
    37             startTime();
    38 
    39           },500);//500,是延时显示的意思,即500毫秒更新一次
    40 
    41        }
    42  
    43        //当分钟和秒是一位时候,需要在前面加0(才更符合要求)
    44        function checkTime(i){
    45 
    46          if(i<10){
    47 
    48            i="0"+i;
    49 
    50          }
    51 
    52          return i;
    53 
    54        }
    55 
    56        </script>
    57 </head>
    58     <body onload="startTime()">
    59        <div id="timetxt"></div>
    60     </body>
    61 </html>
  • 相关阅读:
    Mysql Explain 详解【转】
    Windows下Gradle安装与配置
    MYSQ创建联合索引,字段的先后顺序,对查询的影响分析
    给.Net 5 Api增加JwtBearer认证
    纸壳CMS 3.3.6发布升级.Net 5
    PL/SQL Developer登入时候报ORA-12638: 身份证明检索失败的解决办法
    Mybatis 日志工厂
    Mybatis 配置解析
    Mybatis 完成增删改查
    Mybatis 简介
  • 原文地址:https://www.cnblogs.com/songtianfa/p/11276431.html
Copyright © 2020-2023  润新知