HTML编写时钟

最新推荐文章于 2024-08-01 16:15:33 发布

星弋827

最新推荐文章于 2024-08-01 16:15:33 发布

阅读量133

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_68590134/article/details/129546847

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 70%;
            height: 80px;
            margin: 40px auto;
            background: black;
            color: rgb(43, 229, 43);
            font-size: 35px;
            font-weight: 900;
            text-align: center;
            line-height: 80px;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

<script>
    var div_=document.getElementsByTagName('div')[0];


    setInterval(function(){
        var dateTime=new Date();
        // 年
        var year=dateTime.getFullYear();

        // 月
        var month=dateTime.getMonth()+1;
        month=month>9?month:'0'+month;

        // 日
        var date=dateTime.getDate();
        date=date>9?date:'0'+date;

        // 时
        var h=dateTime.getHours();
        h=h>9?h:'0'+h;
        // div_.innerHTML=h;

        // 分
        var m=dateTime.getMinutes();
        m=m>9?m:'0'+m;

        // 秒
        var s=dateTime.getSeconds();
        s=s>9?s:'0'+s;

        // 星期几
        var dayArr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
        var day=dateTime.getDay();
        day=dayArr[day];

        var time=year+'年'+month+'月'+date+'日'+h+':'+m+':'+s+day;
        div_.innerHTML=time;
    },1000);
    
</script>