实现网页动态时钟

最新推荐文章于 2022-01-18 13:24:54 发布

啃西瓜的小煤球

最新推荐文章于 2022-01-18 13:24:54 发布

阅读量1.8k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/A1010574609/article/details/101373907

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!--<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。-->
<!DOCTYPE html>
<!--lang是language的缩写  en表示English  lang属性声明当前页面的语言类型-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style>
        main{
            width: 600px;
            height: 300px;
            border: 50px ridge #def1ff;
            /*设置边框圆角*/
            border-radius: 50px;
            margin: 0 auto;
            margin-top: 100px;
            /*background-image: url(123.jpg);*/
        }
        section{
            width: 500px;
            height: 180px;
            border: 2px solid black;
            margin: 0 auto;
            margin-top: 60px;
            background-color: rgba(0, 116, 8, 0.04);
        }
        #date{
            /*设置文本对齐方式 right 居右对齐 align使排齐;校准;使成为一条直线*/
            /*text-align 设置文本的对齐方式*/
            text-align: right;
            /*设置字体的大小*/
            font-size: 20px;
        }
        #time{
            font-size: 100px;
            /*设置文本对齐方式 center 居中*/
            text-align: center;
            /*border是会随着时间显示的大小变化的*/
            border: 1px solid black;
            /*这是div的高度*/
            height: 154px;
            /*设置行高，用来垂直居中*/
            line-height: 155px;
        }
    </style>
</head>
<body>
<!--main：主要的 也是html5新增的语义化标签，只能在文档里使用一次-->
    <main>
        <section>
            <div id="date">2018年09月19日 星期四</div>
            <div id="time">15:05:59</div>
        </section>
    </main>

<script>
    //定义函数：用函数把部分功能代码封装起来，可以多次使用
    function showTime(){
        // var 声明变量的关键字
        // d 变量名 可以用来表示一切东西

        var d = document.querySelector('#date');

        var now = new Date();
        //获取年月日
        var year = now.getFullYear();
        var month = now.getMonth()+1;
        var day = now.getDate();
        //获取时分秒
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        //三目运算符
        month = month < 10 ? "0"+month : month;
        hour = hour < 10 ? "0"+hour : hour;
        minute = minute < 10 ? "0"+minute : minute;
        second = second < 10 ? "0"+second : second;
        day = day < 10 ? "0"+day : day;

        var t = document.querySelector('#time')
        var time = hour+':'+minute+":"+second;
        t.innerHTML = time
        //定义周，把数字周转换成字符形式的星期几
        var week = now.getDay()
        //switch:转换。（需要转换的字符）{转换的条件}
        switch (week) {
            case 1:
                week = '星期一';
                break;
            case 2:
                week = '星期二';
                break;
            case 3:
                week = '星期三';
                break;
            case 4:
                week = '星期四';
                break;
            case 5:
                week = '星期五';
                break;
            case 6:
                week = '星期六';
                break;
            case 7:
                week = '星期日';
                break;
        }
        //2018年09月25日 星期三
        var date = year+'年'+month+'月'+day+'日'+' '+week;
        //innerHTML:给标签的内容重新赋值
        d.innerHTML = date

    }
    //调用函数
    showTime();
    //定时器 ，（执行的函数，间隔的时间(单位：毫秒）)
    setInterval(showTime,1000)
</script>
</body>
</html>

啃西瓜的小煤球

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
实现网页动态时钟

<!DOCTYPE html><html lang="en"><head>...
复制链接

扫一扫