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>
