html 时钟效果

HTML实时时钟实现

原创已于 2022-05-18 22:01:21 修改 · 511 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

于 2022-05-18 21:54:37 首次发布

该博客展示了一个使用HTML、CSS和JavaScript实现的实时时钟效果。通过JavaScript获取当前日期和时间，并格式化显示，包括年、月、日、小时、分钟、秒以及星期。代码中使用了`setInterval`来每秒更新时间。

html 时钟效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3></h3>
<script>
    let aa = document.querySelector('h3')
    t()
    setInterval(t, 1000)

    //定时器每一秒执行一次t函数

    function t() {
        let dd = new Date()
        let yy = dd.getFullYear()
        let mm = String(dd.getUTCMonth()+1).padStart(2, '0')
        let da = String(dd.getDate()).padStart(2, '0')
        let hh = String(dd.getHours()).padStart(2, '0')
        let mi = String(dd.getMinutes()).padStart(2, '0')
        let ss = String(dd.getSeconds()).padStart(2, '0')
        //let ss = dd.getSeconds().toString().padStart(2, '0')
        let wks = '星期'.concat('日一二三四五六'.charAt(dd.getDay()))
        aa.innerHTML = `${yy}年${mm}月${da}日${hh}:${mi}:${ss}   ${wks}`
    }
</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vpSQSfkc-1652882059789)(https://gitee.com/springlgd/images/raw/master/imgs/202205182153308.png)]