一、JavaScript 实现倒计时程序
(一)基本代码示例
javascript// 设置倒计时目标时间,这里以2025年12月31日23:59:59为例const targetDate = new Date('2025-12-31T23:59:59').getTime();// 获取显示倒计时的元素const countdownElement = document.getElementById('countdown');// 更新倒计时的函数function updateCountdown() { const now = new Date().getTime(); // 获取当前时间 const distance = targetDate - 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); // 将倒计时结果显示到页面上 countdownElement.innerHTML = `${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`; // 如果倒计时结束,显示特定信息 if (distance < 0) { clearInterval(interval); countdownElement.innerHTML = '倒计时结束!'; }}// 每隔1秒更新一次倒计时const interval = setInterval(updateCountdown, 1000);// 页面加载完成后立即更新一次倒计时updateCountdown();
(二)代码解析
设置目标时间:通过
new Date()
创建一个日期对象,并使用getTime()
方法获取目标时间的时间戳,这里以2025年12月31日23:59:59为例。获取显示元素:使用
document.getElementById()
方法获取页面中用于显示倒计时的元素,假设其id为“countdown”。更新倒计时函数:定义
updateCountdown()
函数,首先获取当前时间的时间戳,然后计算目标时间与当前时间的时间差。接着,将时间差转换为天、小时、分钟、秒,并使用字符串模板将这些值拼接起来,通过修改元素的innerHTML
属性,将其显示到页面上。如果时间差小于0,说明倒计时结束,清除定时器并显示“倒计时结束!”信息。定时器:使用
setInterval()
方法每隔1秒调用一次updateCountdown()
函数,以实现倒计时的动态更新。同时,在页面加载完成后立即调用一次该函数,确保倒计时能够即时显示。
二、Python 实现倒计时程序
(一)基本代码示例
pythonimport timefrom datetime import datetime# 设置倒计时目标时间target_time = datetime(2025, 12, 31, 23, 59, 59)# 获取当前时间now = datetime.now()# 计算时间差time_difference = target_time - now# 将时间差转换为秒total_seconds = time_difference.total_seconds()# 倒计时循环while total_seconds > 0: # 计算天、小时、分钟、秒 days, remainder = divmod(total_seconds, 86400) hours, remainder = divmod(remainder, 3600) minutes, seconds = divmod(remainder, 60) # 打印倒计时信息 print(f"{int(days)}天 {int(hours)}小时 {int(minutes)}分钟 {int(seconds)}秒", end='\r') # 等待1秒 time.sleep(1) # 更新时间差 now = datetime.now() time_difference = target_time - now total_seconds = time_difference.total_seconds()print("倒计时结束!")
(二)代码解析
设置目标时间与获取当前时间:使用
datetime
模块中的datetime
类创建目标时间和当前时间的对象。计算时间差:通过目标时间减去当前时间得到一个
timedelta
对象,表示时间差。然后使用total_seconds()
方法将时间差转换为秒数。倒计时循环:当总秒数大于0时,进入循环。在循环中,使用
divmod()
函数依次计算天、小时、分钟、秒,并通过print()
函数将倒计时信息打印到控制台,end='\r'
参数使得每次打印都会回到行首,实现倒计时信息的原地更新。接着,使用time.sleep(1)
使程序暂停1秒,模拟倒计时效果。然后,重新获取当前时间并更新时间差,继续循环直到倒计时结束。倒计时结束:当总秒数小于等于0时,退出循环,打印“倒计时结束!”信息。
三、HTML + CSS + JavaScript 实现倒计时程序
(一)HTML 结构
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>倒计时示例</title> <link rel="stylesheet" href="styles.css"></head><body> <div class="countdown-container"> <div id="countdown"> <span class="days">00</span>天 <span class="hours">00</span>小时 <span class="minutes">00</span>分钟 <span class="seconds">00</span>秒 </div> </div> <script src="script.js"></script></body></html>
(二)CSS 样式
cssbody { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.countdown-container { text-align: center;}#countdown span { display: inline-block; font-size: 2em; margin: 0 10px; padding: 10px; background-color: #333; color: #fff; border-radius: 5px;}
(三)JavaScript 代码
javascript复制const targetDate = new Date('2025-12-31T23:59:59').getTime();const countdownElement = document.getElementById('countdown');function updateCountdown() { const now = new Date().getTime(); const distance = targetDate - 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); countdownElement.querySelector('.days').textContent = days.toString().padStart(2, '0'); countdownElement.querySelector('.hours').textContent = hours.toString().padStart(2, '0'); countdownElement.querySelector('.minutes').textContent = minutes.toString().padStart(2, '0'); countdownElement.querySelector('.seconds').textContent = seconds.toString().padStart(2, '