智能社- clock

最新推荐文章于 2024-06-13 09:46:11 发布

weixin_30263277

最新推荐文章于 2024-06-13 09:46:11 发布

阅读量57

点赞数

原文链接：http://www.cnblogs.com/bravolove/p/5743848.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>闹钟</title>
</head>

<body>
        <script>
            function  toDouble(num) {//格式化数字为双数
               return num < 10 ? "0"+ num : ""+ num;  //千万记得return 否则后面格式化时没有返回值，弹出undefined
            }
            function getDatesAndTimes(){//返回的是格式化过字符串时分秒 201608060941
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;//注意月份需要+1
                var day = date.getDate();//日
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                var str = toDouble(year) + toDouble(month) + toDouble(day)+toDouble(hour)+toDouble(minute)+toDouble(second);
                return str;
            }
            //图片数组
            var images = [
                "images/0.jpg","images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg",
                "images/6.jpg","images/7.jpg","images/8.jpg","images/9.jpg","images/10.jpg","images/11.jpg"
            ];

            window.onload = function () { //核心 str = 091623  目标：日期时间字符串与图片对应起来
                var aImage = document.getElementsByTagName("image");//12张图片
                var len = aImage.length;//提升效率用
                getDatesAndTimes();//防止1s延时
                setInterval(function () {
                    var strDateAndTime = getDatesAndTimes();//当前的日期和时间
                    for(var i= 0; i < len; i++){
                        aImage[i].style.src = images[strDateAndTime.charAt(i)] //当前日期的第几位的数字就是图片数组的下标
                    }
                },1000);
            }

        </script>
    <div id="div1">
        <ul>
            <li><image src="images/0.jpg"></image></li>
            <li> <image src="images/1.jpg"></image></li>
            :
            <li> <image src="images/2.jpg"></image></li>
            <li><image src="images/3.jpg"></image></li>
            ：
            <li><image src="images/4.jpg"></image></li>
            <li><image src="images/5.jpg"></image></li>
            ：
            <li><image src="images/6.jpg"></image></li>
            <li> <image src="images/7.jpg"></image></li>
            ：
            <li> <image src="images/8.jpg"></image></li>
            <li><image src="images/9.jpg"></image></li>
            ：
            <li><image src="images/10.jpg"></image></li>
            <li><image src="images/11.jpg"></image></li>
        </ul>
    </div>

</body>
</html>

转载于:https://www.cnblogs.com/bravolove/p/5743848.html