下面是“基于JavaScript显示当前时间以及倒计时功能”的完整攻略，分为两步：显示当前时间、制作倒计时。
1. 显示当前时间
步骤1：创建HTML文件
首先，需要创建一个HTML文件，例如index.html。
<!DOCTYPE html>
<html>
<head>
<title>显示当前时间</title>
</head>
<body>
<p id="currentTime"></p>
<script src="main.js"></script>
</body>
</html>
这里创建了一个包含一个<p>标签的HTML页面，并在<script>标签中引入一个JavaScript文件main.js，该文件用于更新时间。
步骤2：编写JavaScript代码
接下来，需要在main.js文件中编写JavaScript代码，用于显示当前时间。
function updateTime() {
const currentTime = new Date()
const hours = currentTime.getHours()
const minutes = currentTime.getMinutes()
const seconds = currentTime.getSeconds()
const timeString = `${hours}:${minutes}:${seconds}`
document.getElementById('currentTime').innerText = timeString
}
setInterval(updateTime, 1000)
以上代码首先定义了一个updateTime函数，用于获取当前时间并将其显示在页面上。然后使用setInterval函数每隔1秒钟调用一次updateTime函数，以实时更新时间。
步骤3：运行HTML文件
最后，可以在浏览器中打开index.html文件，即可看到页面上显示出当前的时间。
2. 倒计时功能
步骤1：创建HTML文件
同样需要创建一个HTML文件，例如countdown.html。
<!DOCTYPE html>
<html>
<head>
<title>倒计时</title>
</head>
<body>
<div>
<label for="countdown">设置倒计时时间：</label>
<input type="text" id="countdown" placeholder="格式为 2022-01-01 00:00:00" />
<button onclick="startCountdown()">开始倒计时</button>
</div>
<p id="countdownDisplay"></p>
<script src="main.js"></script>
</body>
</html>
这里创建了一个包含一个输入框和一个按钮的HTML页面，并在<script>标签中引入一个JavaScript文件main.js，用于倒计时的代码。
步骤2：编写JavaScript代码
接下来，需要在main.js文件中编写JavaScript代码，用于实现倒计时功能。
function startCountdown() {
const countdownInput = document.getElementById('countdown')
const countdownDisplay = document.getElementById('countdownDisplay')
const countdownDate = new Date(countdownInput.value)
setInterval(() => {
const now = new Date().getTime()
const distance = countdownDate.getTime() - now
const days = Math.floor(distance / (1000 * 60 * 60 * 24))
const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
const seconds = Math.floor((distance % (1000 * 60)) / 1000)
const countdownString = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`
countdownDisplay.innerText = countdownString
}, 1000)
}
以上代码定义了一个startCountdown函数，用于获取用户在输入框中设定的倒计时时间，并每秒钟更新显示倒计时时间的文本内容。
步骤3：运行HTML文件
最后，在浏览器中打开countdown.html文件，输入倒计时的截止时间，点击开始倒计时按钮即可启动倒计时功能，并在页面上实时显示倒计时的时间。
示例说明
请查看以下两个示例：
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于javascript显示当前时间以及倒计时功能 - Python技术站
微信扫一扫 
支付宝扫一扫 