小案例---倒计时的实现

小案例---倒计时的实现

思路如下:

  1. 设定目标日期的时间戳(一般从后端获取)
  2. 每一秒更新一次倒计时,执行倒计时函数

倒计时函数内容:

  1. 获取时间差
  2. 分别计算出对应的 天、时、分、秒
  3. 更新 html 元素的内容

代码如下:

html 复制代码
<div id="countdown">
  <span id="days">00</span> 天
  <span id="hours">00</span> 小时
  <span id="minutes">00</span> 分钟
  <span id="seconds">00</span> 秒
</div>
js 复制代码
// 目标日期(以毫秒为单位,可以是将来的日期和时间)
const targetDate = new Date('2024-02-31T20:59:59').getTime();

function updateCountdown() {
  const currentDate = new Date().getTime();
  const timeRemaining = targetDate - currentDate;

  // 计算剩余的天、小时、分钟和秒
  const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
  const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

  // 更新 HTML 元素的内容
  document.getElementById('days').innerHTML = formatTime(days);
  document.getElementById('hours').innerHTML = formatTime(hours);
  document.getElementById('minutes').innerHTML = formatTime(minutes);
  document.getElementById('seconds').innerHTML = formatTime(seconds);
}

function formatTime(time) {
  return time < 10 ? `0${time}` : time;
}

// 每秒更新一次倒计时
setInterval(updateCountdown, 1000);
css 复制代码
#countdown {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 20px;
  color: skyblue;
}

#countdown span {
  margin: 0 10px;
}
相关推荐
花生侠1 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
猿榜2 分钟前
魔改编译-永久解决selenium痕迹(二)
javascript·python
阿幸软件杂货间6 分钟前
阿幸课堂随机点名
android·开发语言·javascript
一涯8 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调15 分钟前
记一次 Vite 下的白屏优化
前端·css
threelab15 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined217 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
蓝倾1 小时前
淘宝批量获取商品SKU实战案例
前端·后端·api
comelong1 小时前
Docker容器启动postgres端口映射失败问题
前端
花海如潮淹1 小时前
硬件产品研发管理工具实战指南
前端·python