js实现动态数字时钟

最新推荐文章于 2022-11-16 15:27:48 发布

DeeJinG

最新推荐文章于 2022-11-16 15:27:48 发布

阅读量957

点赞数 3

分类专栏：笔记

原文链接：https://www.cnblogs.com/wenhainan/p/10432342.html

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

转自：https://www.cnblogs.com/wenhainan/p/10432342.html

1.效果如下

在这里插入图片描述

2.html部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS — 实现简单的数字时钟效果</title>
    <link rel="stylesheet" type="text/css" href="">
</head>
<body>
    <div class="demo">
        <span id="nowTime"></span>
    </div>
</body>

3.js部分

<script type="text/javascript">
    var newDate = '';
    getLangDate();
    function dateFilter(date){ //值小于10时，在前面补0
        if(date < 10){
            return "0"+date;
        }
        return date;
    }

    function getLangDate(){
        var dateObj = new Date(); //表示当前系统时间的Date对象
        var year = dateObj.getFullYear(); //当前系统时间的完整年份值
        var month = dateObj.getMonth()+1; //当前系统时间的月份值
        var date = dateObj.getDate(); //当前系统时间的月份中的日
        var day = dateObj.getDay(); //当前系统时间中的星期值
        var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串
        var hour = dateObj.getHours(); //当前系统时间的小时值
        var minute = dateObj.getMinutes(); //当前系统时间的分钟值
        var second = dateObj.getSeconds(); //当前系统时间的秒钟值
        var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午
        newDate = dateFilter(year)+"-"+dateFilter(month)+"-"+dateFilter(date)+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);
        document.getElementById("nowTime").innerHTML = "当前时间： "+newDate+"　"+week;
        setTimeout(getLangDate,1000);
    }
</script>
</html>

DeeJinG

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现动态数字时钟

1.效果如下2.html部分<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>JS — 实现简单的数字时钟效果</title> <link rel="stylesheet" type="text/css" href=""></head><body> <div class="demo"&
复制链接

扫一扫