首页手记实践|制作一个数码时钟（时间与日期切换）

实践|制作一个数码时钟（时间与日期切换）

标签：

Html/CSS JavaScript

--------正常显示时间的时分秒，当鼠标移上去的时候，切换成年月日---------

线上演示【戳我】

如下是动态示意图：

数码时钟主要特色：


 1. 简洁
 2. 金属色彩
 3. setInterval()-->定时器
 4. 运用事件onmouseover()和onmouseout()，使时间与日期之间自如切换
 5. 个人能力有限，还望大家一起修改，使之更加完善

一些问题：
各个浏览器的显示不是很理想，我已经想尽各种办法，使之平稳展现；


 1. 火狐-->进行事件切换时，浮度比较大；
 2. 谷歌-->完美运行(去掉某些样式）；
 3. IE-->除了最新的，其他的不敢多想；

只显示时分秒的JS代码：

<script type="text/javascript">
    window.onload = function() {
        var imgs = document.getElementsByTagName("img");
        function checkTime(x) {
            if(x<10) return "0" + x;
            else return "" + x;
        }
        function oShowTime() {
            var oDate = new Date();
            var oHou = oDate.getHours();
            var oMin = oDate.getMinutes();
            var oSec = oDate.getSeconds();
            var str = checkTime(oHou) + checkTime(oMin) + checkTime(oSec);
            for (var i=0; i<imgs.length; i++) {
                imgs[i].src = "images/" + str[i] + ".JPG";
            }
        }
        setInterval(oShowTime, 1000);
        oShowTime();
    };  
    </script>

时间与日期事件切换的JS代码：

<script type="text/javascript">
    window.onload = function() {
        var oDiv = document.getElementById("div1");
        var imgs = document.getElementsByTagName("img");
        var timer = null;
        /*判断获取到的数字是否小于10*/
        function checkTime(x) {
            if(x<10) return "0" + x;
            else return "" + x;
        }
        /*鼠标点击事件*/
        oDiv.onmouseover = function() {
            clearInterval(timer);
            fnDate();
        };
        oDiv.onmouseout = function() {
            clearInterval(timer);
            fnTime();
        };

        /*获取的日期函数*/
        function fnDate() {
            function oShowDate() {
                var oDate = new Date();
                var oYea = oDate.getFullYear();
                oYea = oYea.toString();
                var oMon = oDate.getMonth()+1;
                var oDay = oDate.getDay();
                var str = oYea.substr(2,2) + checkTime(oMon) + checkTime(oDay);
                var aPar = document.getElementsByTagName("p");
                for (var i=0; i<imgs.length; i++) {
                    imgs[i].src = "images/" + str[i] + ".JPG";
                }

                for (var j=0; j<aPar.length; j++) {
                    aPar[j].innerHTML = "-";
                }
            }
            timer = setInterval(oShowDate, 1000);
            oShowDate();
        }

        /*获取的时间函数*/
        function fnTime() {
            function oShowTime() {
                var oDate = new Date();
                var oHou = oDate.getHours();
                var oMin = oDate.getMinutes();
                var oSec = oDate.getSeconds();
                var str = checkTime(oHou) + checkTime(oMin) + checkTime(oSec);
                var aPar = document.getElementsByTagName("p");
                for (var i=0; i<imgs.length; i++) {
                    imgs[i].src = "images/" + str[i] + ".JPG";
                }
                for (var j=0; j<aPar.length; j++) {
                    aPar[j].innerHTML = ":";
                }
            }
            timer = setInterval(oShowTime, 1000);
            oShowTime();
        }   
        fnTime();

    };  
    </script>

css样式设置：

    <style type="text/css">
        body {
            background-color: #333;
            font-size: 80px;
        }
        #div1 {
            width: 600px;
            height: 180px;
            border: 40px solid #999;
            border-radius: 60px;
            box-shadow: 10px 14px 12px #777;
            margin: 150px auto;
            background-color: #FFF;

        }
        .div2 {
            width: 580px;
            height: 160px;
            margin: 15px 5px;
            padding-left: 9px;       /*谷歌浏览器不用设置*/
        }
        img {
            width: 60px;
            height: 110px;
            float: left;
            margin: 20px 10px;

        }
        p {
            float: left;
            color: #555;
            height: 110px;
            line-height: 110px;
            margin: 12px 5px;
        }
     </style>

时间与日期之间进行切换的完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数码钟表</title>
    <style type="text/css">
        body {
            background-color: #333;
            font-size: 80px;
        }
        #div1 {
            width: 600px;
            height: 180px;
            border: 40px solid #999;
            border-radius: 60px;
            box-shadow: 10px 14px 12px #777;
            margin: 150px auto;
            background-color: #FFF;

        }
        .div2 {
            width: 580px;
            height: 160px;
            margin: 15px 5px;
            padding-left: 9px;       /*谷歌浏览器不用设置*/
        }
        img {
            width: 60px;
            height: 110px;
            float: left;
            margin: 20px 10px;

        }
        p {
            float: left;
            color: #555;
            height: 110px;
            line-height: 110px;
            margin: 12px 5px;
        }

    </style>
    <script type="text/javascript">
    window.onload = function() {
        var oDiv = document.getElementById("div1");
        var imgs = document.getElementsByTagName("img");
        var timer = null;
        /*判断获取到的数字是否小于10*/
        function checkTime(x) {
            if(x<10) return "0" + x;
            else return "" + x;
        }
        /*鼠标点击事件*/
        oDiv.onmouseover = function() {
            clearInterval(timer);
            fnDate();
        };
        oDiv.onmouseout = function() {
            clearInterval(timer);
            fnTime();
        };

        /*获取的日期函数*/
        function fnDate() {
            function oShowDate() {
                var oDate = new Date();
                var oYea = oDate.getFullYear();
                oYea = oYea.toString();
                var oMon = oDate.getMonth()+1;
                var oDay = oDate.getDay();
                var str = oYea.substr(2,2) + checkTime(oMon) + checkTime(oDay);
                var aPar = document.getElementsByTagName("p");
                for (var i=0; i<imgs.length; i++) {
                    imgs[i].src = "images/" + str[i] + ".JPG";
                }

                for (var j=0; j<aPar.length; j++) {
                    aPar[j].innerHTML = "-";
                }
            }
            timer = setInterval(oShowDate, 1000);
            oShowDate();
        }

        /*获取的时间函数*/
        function fnTime() {
            function oShowTime() {
                var oDate = new Date();
                var oHou = oDate.getHours();
                var oMin = oDate.getMinutes();
                var oSec = oDate.getSeconds();
                var str = checkTime(oHou) + checkTime(oMin) + checkTime(oSec);
                var aPar = document.getElementsByTagName("p");
                for (var i=0; i<imgs.length; i++) {
                    imgs[i].src = "images/" + str[i] + ".JPG";
                }
                for (var j=0; j<aPar.length; j++) {
                    aPar[j].innerHTML = ":";
                }
            }
            timer = setInterval(oShowTime, 1000);
            oShowTime();
        }   
        fnTime();

    };  
    </script>
</head>
<body>
    <div id="div1">
        <div class="div2">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/0.JPG"/>
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/0.JPG"/>
            <p>:</p>
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/0.JPG"/>
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/0.JPG"/>
            <p>:</p>
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/0.JPG"/>
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/0.JPG"/>
        </div>
    </div>

</body>
</html>

images图片（JPG）：