zoukankan      html  css  js  c++  java
  • 简单定时器的制作。

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

    定时器的作用

      开启定时器
      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>
    效果图:

    
    
  • 相关阅读:
    python之sorted函数的三个参数
    python 局部变量和全局变量
    简单的理解https的连接过程
    关于web服务接口测试的一些问题及答案
    常用函数
    服务器并发处理能力
    JEMETER 录制
    resin
    loadrunner 计数器
    memcached and redis
  • 原文地址:https://www.cnblogs.com/799875530qq/p/5426067.html
Copyright © 2011-2022 走看看