【基于HTML5的网页设计及应用】—

【基于HTML5的网页设计及应用】——当前日期

🎃个人专栏：

🐬 算法设计与分析：算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础：Java基础_IT闫的博客-CSDN博客

🐋c语言：c语言_IT闫的博客-CSDN博客

🐟MySQL：数据结构_IT闫的博客-CSDN博客

🐠数据结构：数据结构_IT闫的博客-CSDN博客

💎C++：C++_IT闫的博客-CSDN博客

🥽C51单片机：C51单片机（STC89C516）_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用：基于HTML5的网页设计及应用_IT闫的博客-CSDN博客

🥏python：python_IT闫的博客-CSDN博客

🐠离散数学：离散数学_IT闫的博客-CSDN博客

🥽Linux：Linux_Y小夜的博客-CSDN博客

🚝Rust：Rust_Y小夜的博客-CSDN博客

欢迎收看，希望对大家有用！

🎯功能简介

🎯代码解析

🎯核心代码

🎯效果展示

🎯功能简介

这段代码实现了一个简单的显示当前日期和时间的功能。具体功能如下：

1. 页面加载时，调用 `currenttime()` 函数。
2. `currenttime()` 函数中，定义了一个名为 `weekDay` 的数组，用来存储星期几的名称。
3. 获取页面中 id 为 `htime` 的元素，用于后续显示时间。
4. 使用 `setInterval()` 函数每隔一秒执行一次匿名函数，更新页面上显示的时间信息。
5. 在匿名函数中，创建一个 `Date` 对象获取当前时间，并提取年、月、日、小时、分钟、秒以及星期几的信息。
6. 将获取到的时间信息拼接成格式化的字符串，形如 "今天是：年月日时分秒星期"。
7. 最后，将拼接好的时间字符串赋值给 `htime` 元素的 `innerHTML` 属性，以在页面上显示当前日期和时间。

总之，这段代码通过 JavaScript 不断更新页面上特定元素的内容，实现了动态显示当前日期和时间的效果。每秒钟更新一次，确保显示的时间信息是实时的。

🎯代码解析

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

<head>
    <meta charset="UTF-8">
    <title>显示当前日期</title>
</head>

<body onload="currenttime()">
    <h2 align="center" style="color: blue;">软的时间日期对象</h2>
    <h1 align="center" id="htime" style="color: red;"></h1>
    <script>
        function currenttime(){
            var weekDay =["日","一","二","三","四","五","六"];
            //获取htime元素
            var htime =document.getElementById('htime');
            //每一秒更新一次时间
            setInterval(function(){
            //创建Date对象
            var date =new Date();
            //获取年份
            var year= date.getFullYear();
            //获取月并补0
            var month=(date.getMonth()+1).toString().padStart(2,'0');
            //获取日并补0
            var day=date.getDate().toString().padStart(2,'0');
            //获取小时数并补0
            var hours=date.getHours().toString().padStart(2,'0');
            //获取分钟数并补0
            var minutes=date.getMinutes().toString().padStart(2,'0');
            //获取秒数并补0
            var seconds=date.getSeconds().toString().padStart(2,'0');
            //获取星期几
            var weekday=weekDay[date.getDay()];
            //拼接字符串写到htime里面
            var timeStr="今天是："+year+"年"+month+"月"+day+"日"+hours+"时"+minutes+"分"+seconds+"秒"+"星期"+weekday;
            htime.innerHTML=timeStr;
            },1000)
        }
    </script>
</body>


</html>

在这部分代码中，定义了一个简单的 HTML 结构。<body> 标签中调用了 onload="currenttime()" 函数，意味着在页面加载时会执行 currenttime() 函数。之后有两个标题标签 <h2> 和 <h1>，分别用于显示标题和日期时间信息。

<script>
    function currenttime(){
        var weekDay =["日","一","二","三","四","五","六"];
        var htime =document.getElementById('htime');
        setInterval(function(){
            var date =new Date();
            var year= date.getFullYear();
            var month=(date.getMonth()+1).toString().padStart(2,'0');
            var day=date.getDate().toString().padStart(2,'0');
            var hours=date.getHours().toString().padStart(2,'0');
            var minutes=date.getMinutes().toString().padStart(2,'0');
            var seconds=date.getSeconds().toString().padStart(2,'0');
            var weekday=weekDay[date.getDay()];
            var timeStr="今天是："+year+"年"+month+"月"+day+"日"+hours+"时"+minutes+"分"+seconds+"秒"+"星期"+weekday;
            htime.innerHTML=timeStr;
        },1000)
    }
</script>

在这部分代码中，定义了 currenttime() 函数，该函数会在页面加载时被调用。它首先定义了一个包含星期几的数组 weekDay，然后使用 setInterval() 函数每隔一秒更新一次当前时间并显示在页面上。

在 setInterval() 函数内部，首先创建了一个 Date 对象来获取当前时间，然后提取年、月、日、小时、分钟、秒以及星期几等信息，并将其拼接成字符串。最后，使用 innerHTML 将时间字符串显示在页面上。

🎯核心代码

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

<head>
    <meta charset="UTF-8">
    <title>显示当前日期</title>
</head>

<body onload="currenttime()">
    <h2 align="center" style="color: blue;">软的时间日期对象</h2>
    <h1 align="center" id="htime" style="color: red;"></h1>
    <script>
        function currenttime(){
            var weekDay =["日","一","二","三","四","五","六"];
            //获取htime元素
            var htime =document.getElementById('htime');
            //每一秒更新一次时间
            setInterval(function(){
            //创建Date对象
            var date =new Date();
            //获取年份
            var year= date.getFullYear();
            //获取月并补0
            var month=(date.getMonth()+1).toString().padStart(2,'0');
            //获取日并补0
            var day=date.getDate().toString().padStart(2,'0');
            //获取小时数并补0
            var hours=date.getHours().toString().padStart(2,'0');
            //获取分钟数并补0
            var minutes=date.getMinutes().toString().padStart(2,'0');
            //获取秒数并补0
            var seconds=date.getSeconds().toString().padStart(2,'0');
            //获取星期几
            var weekday=weekDay[date.getDay()];
            //拼接字符串写到htime里面
            var timeStr="今天是："+year+"年"+month+"月"+day+"日"+hours+"时"+minutes+"分"+seconds+"秒"+"星期"+weekday;
            htime.innerHTML=timeStr;
            },1000)
        }
    </script>
</body>


</html>