HTML+JS 动态网页示例:实时显示时间和日期
以下是一个简单的基于HTML+JS的动态网页示例,它会在页面上显示当前的时间和日期,并且每隔1秒钟更新一次。
<!DOCTYPE html>
<html>
<head>
<title>动态网页示例</title>
<script type="text/javascript">
// 定义一个函数,用于在网页上显示当前时间
function showTime() {
// 获取当前时间
var now = new Date();
// 将时间转换成字符串,格式为'hh:mm:ss'
var timeString = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
// 将时间字符串显示在网页上
document.getElementById('time').innerHTML = timeString;
}
// 定义一个函数,用于在网页上显示当前日期
function showDate() {
// 获取当前日期
var now = new Date();
// 将日期转换成字符串,格式为'yyyy年mm月dd日'
var dateString = now.getFullYear() + '年' + (now.getMonth()+1) + '月' + now.getDate() + '日';
// 将日期字符串显示在网页上
document.getElementById('date').innerHTML = dateString;
}
// 在页面加载完成后执行showTime和showDate函数
window.onload = function() {
showTime();
showDate();
// 每隔1秒钟更新一次时间和日期
setInterval(showTime, 1000);
setInterval(showDate, 1000);
}
</script>
</head>
<body>
<h1>动态网页示例</h1>
<p>当前时间:<span id="time"></span></p>
<p>当前日期:<span id="date"></span></p>
</body>
</html>
这个网页会在页面上显示当前的时间和日期,并且每隔1秒钟更新一次。这是通过JavaScript中的setInterval函数实现的。在页面加载完成后,会自动执行showTime和showDate函数来显示当前的时间和日期。同时,页面中有两个span标签分别用于显示时间和日期,在JavaScript中使用document.getElementById函数获取这两个标签,并将时间和日期字符串设置为它们的innerHTML属性,从而实现在页面上显示时间和日期的效果。
原文地址: https://www.cveoy.top/t/topic/lUBO 著作权归作者所有。请勿转载和采集!