以下是一个简单的例子,演示如何使用 Date 对象来获取当前时间并在HTML中显示:
<!DOCTYPE html>
<html>
<head>
<title>Date Object Example</title>
</head>
<body>
<p id="timeDisplay">Current time will be displayed here.</p>
<button onclick="displayCurrentTime()">Display Current Time</button>
<script>
// 获取当前时间并在HTML中显示
function displayCurrentTime() {
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// 格式化时间
var formattedTime = hours + ":" + padZero(minutes) + ":" + padZero(seconds);
// 在HTML中显示时间
document.getElementById("timeDisplay").innerHTML = "Current Time: " + formattedTime;
}
// 辅助函数:补零
function padZero(number) {
return (number < 10 ? '0' : '') + number;
}
</script>
</body>
</html>
在这个例子中,通过 new Date() 创建一个 Date 对象,它表示当前的日期和时间。然后,通过 getHours()、getMinutes() 和 getSeconds() 方法获取当前小时、分钟和秒数。最后,将这些信息格式化为字符串,并通过 innerHTML 属性将其显示在HTML中。
点击 "Display Current Time" 按钮时,会更新 <p> 元素的内容,显示当前的时间。
转载请注明出处:http://www.zyzy.cn/article/detail/6237/JavaScript 和 HTML DOM