• 简单定时器的制作。


     在进行定时器的制作时,我想先把我们需要用到的一些东西介绍给大家。

    定时器的作用

      开启定时器
      setInterval 间隔型
      setTimeout 延迟型

      停止定时器
      clearInterval
      clearTimeout

    数码时钟
    思路效果
      获取系统时间:
       date对象
       getHours getMinutes getSeconds
       显示系统时间
       字符串连接
       空位补零

    设置图片路径
    charAt方法

    操作前,我们需要用PS裁剪出0—9的数字图片来,以便让我们看到直观美化的效果。

    下面是我的代码部分和效果图

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>时钟</title>
    <script>

    function zhuanhua(n)
    {
    if(n<10)
    {
    return "0"+n; /*让获取到的系统时间数字型改变为字符串并保证是两位数 */
    }
    else
    {
    return ""+n;
    }
    }


    window.onload= function a() {
    var oimg=document.getElementsByTagName("img");

    var odate=new Date();
    var shuju=zhuanhua(odate.getHours())+zhuanhua(odate.getMinutes())+zhuanhua(odate.getSeconds());
     /*获取系统时间值以及进行函数操作*/

    for(var i=0;i<oimg.length;i++)
    {
    oimg[i].src=shuju [i]+".png";
    }
     /*进行图片替换*/


    setInterval(a,1000)
     /*每1000毫秒进行一次页面刷新*/


    };
    </script>

    </head>
    <body>
    <div style="font-size: 50px">
    <img src="0.png"/>
    <img src="0.png"/>:
    <img src="0.png"/>
    <img src="0.png"/>:
    <img src="0.png"/>
    <img src="0.png"/>
    </div>
    </body>
    </html>
    效果图:

    
    
  • 相关阅读:
    快速幂模板
    ACM大一寒假集训week1.2
    ACM大一寒假集训week1.1
    Gym
    Gym
    大学ACM第八周心得
    大学ACM第六周心得(11.29)
    大学ACM第五周心得
    大学ACM第四周心得
    大学ACM第三周心得
  • 原文地址:https://www.cnblogs.com/799875530qq/p/5426067.html
Copyright © 2020-2023  润新知