DAY16——17 JS 电子时钟案例

最新推荐文章于 2024-11-08 14:35:14 发布

可达可达可达鸭

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量93

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/igotosleep/article/details/124803518

版权

本文展示了一个使用JavaScript编写的实时电子时钟示例。代码通过获取当前日期和时间，并将其格式化显示在HTML页面中。利用setInterval函数每秒更新时间，实现动态显示。此示例对于学习前端开发中的JavaScript时间和日期操作以及DOM操作有帮助。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子时钟</title>
    <style>
        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>YYYY/QQ/EE HH:MM:SS</h1>
</body>
<script>
	//定义h1并且通过标签名来获取数组
    var h1 = document.getElementsByTagName("h1")[0];

    function setH1() {
        //获取时间戳
        //获取现在的日期
        var date = new Date();
        //定义并获取年
        var year = date.getFullYear();
        //定义并获取月
        var month = date.getMonth() + 1;
        //定义并获取日
        var riqi = date.getDate();
        //定义并获取小时
        var hour = date.getHours();
        //定义并获取分钟
        var minutes = date.getMinutes();
        //定义并获取秒
        var seconds = date.getSeconds();
        //定义str并将上方获取的内容赋值给str
        var str = year + "/" + month + "/" + riqi + " " + hour + ":" + minutes + ":" + seconds;
        console.log(str);
        //通过innerHTML对标签的内容进行获取及修改
		//将str写入h1标签
        h1.innerHTML = str;
    }
    //函数的执行
    setH1();

    //定时器
    //每间隔1000毫秒执行一次function
    var timer = setInterval(function() {
        setH1();
    }, 1000)
</script>

</html>