给网页加入实时日期和时间

 

1、html代码

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

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>
CSS

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>
JavaScript

TAG


— THE END —


收藏的用户（1） X
正在加载信息~


admin
管理员
发布于 2023.08.14
命运赠与你的东西早已在暗中标好了价格...

1 条评论
  • 表情

    • 游客你好，回复内容需要 登录 查看！