给网页加入实时日期和时间
2023年08月14日 2071

代码

 

1、html代码

<body>
    <div class="box"></div>
</body>

2、css代码

css部分我这里采用flex布局来实现上下左右居中,你也可以使用其他的方式

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background:#000;
        }
        .box{
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            font-size: 30px;
            color: #fff;
        }
    </style>

3、JavaScript代码

JavaScript代码部分主要是对Date对象和对应方法的使用,如果对这方面不太熟悉,需要去了解一下。通过Date对象的各种方法获取到对应的值,然后拼接出需要的格式就行,这里将获取时间以及时间格式化封装在一个getNowTime方法中,直接调用即可得到对应的日期时间格式。

为了使时间动态变化,需要使用计时函数操作,在计时函数中已每秒为单位调用封装的getNowTime方法,并将得到的值使用innerText放入div中饭即可。

<script>
    const divObj=document.getElementsByClassName('box')[0];
    setInterval(()=>{
        const nowTime=getNowTime();
        divObj.innerText=nowTime;
    })
    function getNowTime(){
        const date=new Date();
        const year=date.getFullYear();
        const month=date.getMonth();
        const day=date.getDate();
        const hour=date.getHours();
        const minite=date.getMinutes();
        const seconds=date.getSeconds();
        return `${year}-${month}-${day} ${hour}:${minite}:${seconds<10?'0'+seconds:seconds}`
    }
</script>

- End -




2 条评论
  • 表情
  • 游客你好,回复内容需要 登录 查看!