倒计时效果

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

div {
  margin: 300px auto;
  width: 200px;
  height: 40px;
  display: flex;
  justify-content: space-around;
}
span {
  width: 40px;
  height: 36px;
  line-height: 36px;
  /* flex: 1; */
  text-align: center;
  background-color: #000;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}

</style>
</head>

<body>

<div>

<span class="hour">1</span>
<span class="minute">1</span>
<span class="second">1</span>

</div>

 function countDown(time) {
  const nowTime = +new Date(); // 当前时间的时间戳
  const inputTime = +new Date(time); // 用户输入时间的时间戳
  const times = (inputTime - nowTime) / 1000; // 当前时间距离用户输入时间(即截止时间)的秒数
  let days = parseInt(times / 60 / 60 / 24); // 天
  days = days < 10 ? '0' + days : days;
  let hours = parseInt(times / 60 / 60 % 24);// 时
  hours = hours < 10 ? '0' + hours : hours;
  let minutes = parseInt(times / 60 % 60);// 分
  minutes = minutes < 10 ? '0' + minutes : minutes;
  let seconds = parseInt(times % 60);// 秒
  seconds = seconds < 10 ? '0' + seconds : seconds;
  return {
    days,
    hours,
    minutes,
    seconds
  };
}

let hour = document.querySelector('.hour');
let minute = document.querySelector('.minute');
let second = document.querySelector('.second');

function alterTime() {
  let time = countDown('2022-07-10 02:02:02');
  hour.innerHTML = time.hours;
  minute.innerHTML = time.minutes;
  second.innerHTML = time.seconds;
}

alterTime();
setInterval(alterTime, 1000);

</script>
</body>

</html>

倒计时效果

陈元元

引用和评论

浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

你可能不知道的图片加载相关知识

更强大、更灵活！ defineModel 重新定义双向绑定

使用CSS给标题添加书名号并超出省略

Base64编码的“暗坑”：解密失败？可能是这些原因！