码迷,mamicode.com
首页 > Web开发 > 详细

利用JS函数制作时钟运行程序

时间:2016-01-07 20:13:54      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <script type="text/javascript">
    function toDouble(num)//不满两位,空位补零
    {
        if(num<10)
        {
            return 0+num;//一位数前面加零,就变为两位数
        }
        else
        {
            return ‘‘+num;
        }
    }
    window.onload=function()//程序主体运行内容
    {
        var oBtn=document.getElementById(btn1);
        var aImg=document.getElementsByTagName(img);
        var i=0;
        function updateTime()
        {
            var oDate=new Date();//获取系统时间
                var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
                //alert(str);
            for(i=0;i<aImg.length;i++)
            {
                aImg[i].src=img/+str.charAt(i)+.png;//设置图片路径使用charAt方法
            }
        }
        setInterval(updateTime,1000);//自动跟随系统时间每秒刷新
        updateTime();//避免页面刷新时停留1秒钟等待时间
    };
    </script>
</head>
<body style="color:#FFFF00; background:#990099; font-size:30px;">
    <img src="C:\Users\Administrator\Desktop\练习文件\数码时钟\img\0.png"/>
    <img src="C:\Users\Administrator\Desktop\练习文件\数码时钟\img\0.png"/><img src="C:\Users\Administrator\Desktop\练习文件\数码时钟\img\0.png"/>
    <img src="C:\Users\Administrator\Desktop\练习文件\数码时钟\img\0.png"/><img src="C:\Users\Administrator\Desktop\练习文件\数码时钟\img\0.png"/>
    <img src="C:\Users\Administrator\Desktop\练习文件\数码时钟\img\0.png"/></body>
</html>

运行结果如下图:

技术分享

利用JS函数制作时钟运行程序

标签:

原文地址:http://www.cnblogs.com/luoyeguichen/p/5110947.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!