JavaScript案例学习7

最新推荐文章于 2023-12-02 22:06:52 发布

canglingyue

最新推荐文章于 2023-12-02 22:06:52 发布

阅读量575

点赞数

分类专栏： 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>

canglingyue

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript案例学习7

JavaScript 案例19Date 获取时分秒<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Date</title></head><body><script> /** * var oDate = new Date() * getHours() 获取时
复制链接

扫一扫