JavaScript案例学习7

最新推荐文章于 2024-10-06 12:31:10 发布

canglingyue

最新推荐文章于 2024-10-06 12:31:10 发布

阅读量603

点赞数

分类专栏： js+jq 文章标签： javascript

本文链接：https://blog.csdn.net/canglingyue/article/details/51747742

版权

js+jq 专栏收录该内容

69 篇文章 0 订阅

订阅专栏

个人博客

JavaScript 案例19

Date 获取时分秒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date</title>
</head>
<body>
<script>
    /**
     * var oDate = new Date()
     * getHours() 获取时
     * getMinutes() 获取分钟
     * getSeconds() 获取秒
     *
     * */
    var oDate = new Date();
    alert(oDate.getHours());
    alert(oDate.getMinutes());
    alert(oDate.getSeconds());
</script>
</body>
</html>

JavaScript 案例20

数码时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数码时钟</title>
    <style>
        body{
            font-size: 50px;
            background: forestgreen;
        }
    </style>
</head>
<body>
<div id="clock">
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">:
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">:
    <img src="img/0.png" alt="">
    <img src="img/0.png" alt="">
</div>

<script>
    //补0函数
    function toDou(n) {
        if (n<10){
            return "0"+n;
        }else {
            return ""+n;
        }
    }
    var oDiv = document.getElementById("clock");
    var aImg = oDiv.getElementsByTagName("img");
    //var str = "123456";
    function clock() {
        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 = 'img/'+str[i]+'.png';//存在兼容性问题
            aImg[i].src = 'img/'+str.charAt(i)+'.png';
        }
    }
    setInterval(clock,1000);
    clock();
</script>
</body>
</html>