需求:将当前时间以YYYY-MM-DD HH:mm:ss 形式显示在页面。eg:2024/3/25 21:52:40
分析:
1 .调用日期对象方法进行转换
2 .数字补0操作
方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 300px;
height: 40px;
border: 1px solid pink;
text-align: center;
line-height: 40px;
}
</style>
<body>
<div></div>
<script>
const div =document.querySelector('div');
function getMyDate(){
const date = new Date();
//补0操作
let h = date.getHours();
h = h<10? '0' + h : h;
let m = date.getHours();
m = m<10? '0' + m : m;
let s = date.getHours();
s = s<10? '0' + s : s;
//字符串拼接
return `今天是${date.getFullYear()}年 ${date.getMonth()}月 ${date.getDate()}日
${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
}
//定时器
setInterval(function(){
div.innerHTML = getMyDate()
},1000)
</script>
</body>
</html>
方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div{
width: 300px;
height: 40px;
border: 1px solid pink;
text-align: center;
line-height: 40px;
}
</style>
<body>
<div></div>
<script>
const div =document.querySelector('div');
//得到日期对象
const date = new Date();
div.innerHTML=date.toLocaleString(); //2024/3/25 21:52:40
/* div.innerHTML=date.toLocaleDateString(); //2024/3/25
div.innerHTML=date.toLocaleTimeString();// 21:52:40 */
//定时器
setInterval(function(){
const date = new Date();
div.innerHTML = date.toLocaleString();
},1000)
</script>
</body>
</html>