网页显示时间

最新推荐文章于 2023-08-21 11:10:52 发布

啊呼,吖

最新推荐文章于 2023-08-21 11:10:52 发布

阅读量116

点赞数

文章标签： html css dreamweaver

原文链接：https://www.bilibili.com/video/BV1AT4y1e7GF/?spm_id_from=333.337.search-card.all.click&vd_source=eae7ab8dd219fff24a0e74cd7c03934c

版权

案例非本人创作

最近在找vue3的视频找到b站知乎日报讲了vue3 setup API

然后有项目可是我中间一直卡了proxy跨域问题一直获取不到数据

弄了两天没有人带都是自学所以我就放弃这个项目,做一下有趣的东西转换一下心情

【html+css+js】网页显示时间 【html+css+js】网页显示时间_哔哩哔哩_bilibili 【html+css+js】网页显示时间

运行成功

报错的话

1 second seconds注意有没有写错

2 JS部分里的temps temph注意有没有写错

<!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>
    <link rel="stylesheet" href="213.css">
<body>
    <div class="relative">
        <div class="padding">
            <div id="time-hour" class="text">00</div>
            <div class="time-temp">:</div>
            <div id="time-minutes" class="text">00</div>
            <div class="time-temp">:</div>
            <div id="time-second" class="text">00</div>
        </div>
        <div class="padding-bottom">
            <div id="time-year" class="text">00</div>
            <div class="time-ltemp">-</div>
            <div id="time-month" class="text">00</div>
            <div class="time-ltemp">-</div>
            <div id="time-day" class="text">00</div>
        </div>
    </div>
    <script>
        function time(){
            var time= new Date();
            var hour;
            var minutes;
            var seconds;
            var year;
            var month;
            var day;
            year = time.getFullYear();
            month = time.getMonth();
            day = time.getDate();
            document.getElementById("time-year").innerHTML=year;
            document.getElementById("time-month").innerHTML=month + 1;
            document.getElementById("time-day").innerHTML=day;
            var temph=time.getHours();
            if(temph <=12 && temph >0){
                hour = "0" + temph;
            }else{
                hour=temph;
            }
            var tempm = time.getMinutes();
            if(tempm <10 && tempm >=0){
                minutes = "0" + tempm;
            }else{
                minutes = tempm;
            }
            var temps = time.getSeconds();
            if(temps < 10 && temps >=0){
                seconds = "0" + temps;
            }else{
                seconds = temps;
            }
            document.getElementById("time-hour").innerHTML=hour;
            document.getElementById("time-minutes").innerHTML=minutes;
            document.getElementById("time-second").innerHTML=seconds;
        }
        window.setInterval("time()",100);
    </script>
</body>
</html>

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif';
}
div{
    display: flex;
}
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.relative{
    min-width: 1464px;
    min-height: 864px;
    padding: 6.5rem 0 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
    background: #040d21;
    position: relative;
    display: block;
}
.padding{
    position: absolute;
    top: 30%;
    left: 31%;
    color: #fff;
    font-size: 118px;
    font-weight: 800;
}
.padding-bottom{
    position: absolute;
    top: 45%;
    left: 43%;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
}
.time-temp{
    margin: 0 20px;
    transform: translateY(-20px);
}
.time-ltemp{
    margin: 0 10px;
    transform: translateY(-5px);
}
.text{
    background: linear-gradient(-210deg,#a2facf 0%,#64acff 100%);
    color: transparent;
    -webkit-background-clip: text;
    letter-spacing: -0.03em;
    display: block;
    align-items: center;
}