定时器实现数码时钟

最新推荐文章于 2024-04-20 18:00:52 发布

Cc_JoJo

最新推荐文章于 2024-04-20 18:00:52 发布

阅读量683

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： js

本文链接：https://blog.youkuaiyun.com/caohoucheng/article/details/72830582

web前端专栏收录该内容

20 篇文章

订阅专栏

数字时钟

原理步骤
1：获取系统时间，并显示出来
2：创建计时器，每秒进行一次时间获取和显示

效果图：
这里写图片描述

源代码如下：

<!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=utf-8" />
<title>无标题文档</title>
<script>
//时间转换
function toDou(n)
{
    if(n<10)
    {
        return '0'+n;//oDate.getHours()获取数小于10时，前面加个‘0’
    }else
    {
        return ''+n;//写空‘’是为了将获取的数字转换为字符
    }
}
window.onload=function(){
    function show(){
    var oTime=document.getElementById('time');//获取input
    var oDate=new Date();//创建一个Date（）对象
    var str=toDou(oDate.getHours())+':'+toDou(oDate.getMinutes())+':'
    +toDou(oDate.getSeconds());//获取系统时间（**：**：**）
    oTime.value=str;//将时间放到input上显示
    }
    setInterval(show,1000);//每一秒获取一次
   show();//首先加载系统时间，避免界面上初始时间为空
}

</script>
</head>

<body>
<input id="time" type="text" readonly="readonly" style="border:none" />
</body>
</html>

图片时钟

原理步骤
1：获取系统时间，并由数字图片显示出来
2：创建计时器，每秒进行一次时间获取并根据时间更新图片显示
效果图：
这里写图片描述

准备10张图片（数字0-9），命名改成0.jpg，1.jpg……9.jpg（0.png其他格式也可以）

代码如下

<!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=utf-8" />
<title>无标题文档</title>
<style>
img {
    width: 50px;
    height: 50px;
}
</style>
<script>
function toDou(n)
{
    if(n<10)
    {
        return '0'+n;
    }else
    {
        return ''+n;
    }
}
window.onload=function()
{

    var aImg=document.getElementsByTagName('img');
    //var str='112321';
    function show(){
        var oDate=new Date();
    var str=toDou(oDate.getHours())+toDou(oDate.getMinutes())+toDou(oDate.getSeconds());
      for(var i=0;i<aImg.length;i++)
      {
        aImg[i].src='images/'+str[i]+'.jpg';
      }
        };
    setInterval(show,1000);
    show();
};
</script>
</head>
<body style="color:red;font-size:50px;">
<img  src="images/0.jpg" /> 
<img src="images/0.jpg" />
 : 
<img src="images/0.jpg" /> 
<img src="images/0.jpg" />
 : 
<img src="images/0.jpg" /> 
<img src="images/0.jpg" />
</body>
</html>

aImg[i].src=’images/’+str[i]+’.jpg’;这种方法在低版本的ie下是不兼容的，解决方法：可以写成

aImg[i].src='images/'+str.charAt(i)+'.jpg';

charAt方法可以兼容的取字符串的某一位

Date对象其他方法：

<script>
window.onload=function()
{
    var oDate=new Date();
    //弹出年
    alert(oDate.getFullYear());
    //弹出月，但是弹出的月比实际月份少1，月份是从0开始的（0,1,2...11），所以要在月份上+1
    alert(oDate.getMonth()+1);
    //弹出几号
    alert(oDate.getDate());
    //弹出星期几（注意：0代表周日1，2,3,4,5,6正常）
    alert(oDate.getDay());
};
</script>