关闭

《JavaScript学习笔记八》:数字时钟的实现

标签: javascript数字时钟定时器
579人阅读 评论(0) 收藏 举报
分类:

《JavaScript学习笔记八》:数字时钟的实现

在我们的生活中,数字时钟随处可见,在我们的手机上,在我们的电脑上,以及在一些时间软件上,都可以看到数字时钟,与下图类似,这篇博文我们就来模拟下数字时钟的实现。

首先我们来实现时间部分,效果图如下:

这个功能相对比较简单,就是根据Date对象的一些获取时间的方法来获取时间并拼接为一个字符串,然后根据字符串上每位的数字来显示0~9的图片资源即可。

Date对象的方法有:
(图片来至于这里:http://www.w3school.com.cn/jsref/jsref_obj_date.asp)

具体实现代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    #div1 {width:400px;height:100px;background:white;left:200px;top:200px;}
    </style>
    <script>
    //将一位数通过补零补位两位数,而如果num本来是两位数,则不变
    function toDou(num)
    {
        if(num<10)
        {
            return '0'+num;
        }
        else
        {
            return ''+num;
        }
    }
    window.onload=function ()
    {
        var oDiv = document.getElementById('div1');
        var aImg=oDiv.getElementsByTagName('img');
        function  ticker()
        {
            var date =new Date();
            //alert(date.getHours());
            var str=toDou(date.getHours())+toDou(date.getMinutes())+toDou(date.getSeconds());

            //var str='123234';
            for(var i=0;i<aImg.length;i++)
            {
                //aImg[i].src='img/'+str[i]+'.png';//由于兼容器str[i]  用str.charAt(i)替代比较好;
                aImg[i].src='img/'+str.charAt(i)+'.png';
            }
        }
        setInterval(ticker,1000);
        ticker();//在这里直接调用ticker();则就可以消除上一个版本的情况
    };
    </script>
    </head>

    <body>
    <div id="div1">
        <img src="img/0.png" />
        <img src="img/0.png" /><img src="img/0.png" />
        <img src="img/0.png" /><img src="img/0.png" />
        <img src="img/0.png" />

    </div>
    </body>
    </html>

有了如上的代码,则实现如下效果的时钟就相当容易了。

代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    #div1 {width:800px;height:400px;background:white;left:200px;top:200px;}
    </style>
    <script>
    //如果num的位数不是len,则通过在高位补零使得其长度为len
    function zeroFill(num,len)
    {
        var originNum=num;
        var index=0;
        while(num)
        {
            index++;
            num=parseInt(num/10);//注意:这里要进行转换,num/10是一个小数
        }
        var res='';
        for(var i=0;i<len-index;i++)
        {
            res+='0';
        }
        return res+originNum;
    }
    window.onload=function ()
    {
        var oDiv = document.getElementById('div1');
        var aImg=oDiv.getElementsByTagName('img');
        function  ticker()
        {
            var date =new Date();
            var str=zeroFill(date.getFullYear(),4)+zeroFill(date.getMonth()+1,2)+zeroFill(date.getDate(),2)+zeroFill(date.getHours(),2)+zeroFill(date.getMinutes(),2)+zeroFill(date.getSeconds(),2);
            //alert(str);
            //var str='123234';
            for(var i=0;i<aImg.length;i++)
            {
                //aImg[i].src='img/'+str[i]+'.png';//由于兼容器str[i]  用str.charAt(i)替代比较好;
                aImg[i].src='img/'+str.charAt(i)+'.png';
            }
        }
        setInterval(ticker,1000);
        ticker();//在这里直接调用ticker();则就可以消除上一个版本的情况
    };
    </script>
    </head>

    <body>
    <div id="div1">
        <img src="img/0.png" />
        <img src="img/0.png" />
        <img src="img/0.png" />
        <img src="img/0.png" />
        /
        <img src="img/0.png" />
        <img src="img/0.png" />
        /
        <img src="img/0.png" />
        <img src="img/0.png" />
        //
        <img src="img/0.png" />
        <img src="img/0.png" />
        :
        <img src="img/0.png" />
        <img src="img/0.png" /><img src="img/0.png" />
        <img src="img/0.png" />

    </div>
    </body>
    </html>

参考资料

1、blue老师的《js视频教程》

0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

js数字时钟 一个简单的实例

  • 2009-04-09 21:25
  • 3KB
  • 下载

JavaScript 数字时钟代码

  • 2009-05-18 16:39
  • 4KB
  • 下载

JavaScript——计算两个时间间隔的分钟数

function TimeDifference(){ //定义两个变量time1,time2分别保存开始和结束时间 var time1="2009-12-02 12:25"; var ti...
  • yu17310133443
  • yu17310133443
  • 2017-06-22 14:49
  • 1393

使用CANVAS绘制LED点阵时钟

核心内容: 1.数字的LED点阵实现方式 点阵的实现方式其实用到了一个二维数组,这里用到了7X10和4X10的二维数组,当数组值为1时绘制红点,当数组为0时绘制灰点,按照这个方法也可以绘制英文字母...
  • Yalishizhude
  • Yalishizhude
  • 2015-02-22 11:08
  • 1949

Verilog实现数字钟

程序是实现一个数字钟,有进位、清零功能。数字钟的分钟和小时是用数码管显示,秒信号是用LED显示8421BCD码 `timescale 1ns / 1ps ///////////////////////...
  • yixin94
  • yixin94
  • 2013-12-31 11:16
  • 6315

javascript学习笔记9,10---定时器+数码时钟

定时器: 格式 setInterval(show, 1000)  setTimeout(show,1000) show是函数,function show()1000是间隔时间   得...
  • sinat_16790541
  • sinat_16790541
  • 2015-01-10 19:59
  • 617

《JavaScript学习笔记》:只能输入数字的文本框

《JavaScript学习笔记》:只能输入数字的文本框这主要涉及到一个键盘事件(onkeydown)和一个键码值的范围。由于数字0~9所对应的键码为48~57,因此,我们只需要将48~57范围之外的键...
  • u010412719
  • u010412719
  • 2016-06-11 21:08
  • 425

wxwidgets学习笔记——在Frame上显示时间,实现能够定时刷新的时钟

想在Frame窗口上显示时钟信息,因为没有系统的学习wxwidgets,自己想了一种最笨的方案,见笑。   一、实现方案: 1、原始方案: 用wxDateTime获取当前的时间,赋给一个w...
  • ssl2009
  • ssl2009
  • 2011-09-16 00:07
  • 4316

学习笔记之浅谈MSP430时钟

  • 2012-07-02 17:47
  • 19KB
  • 下载

STM32时钟学习笔记

  • 2010-11-12 17:01
  • 30KB
  • 下载
    个人资料
    • 访问:635675次
    • 积分:12214
    • 等级:
    • 排名:第1386名
    • 原创:606篇
    • 转载:14篇
    • 译文:0篇
    • 评论:108条
    联系方式
    有问题欢迎探讨咨询哈
    qq号就不留了哈
    欢迎留言
    博客专栏
    最新评论