通过js控制时间,一秒一秒自己动的实例

下面是关于“通过JS控制时间，一秒一秒自己动”的完整攻略：

步骤一：HTML部分

首先，在HTML部分创建一个DIV元素并添加一个id，比如 #countdown。这个元素将用于显示倒计时的值。

<div id="countdown"></div>

步骤二：CSS部分

接下来，需要为倒计时的DIV元素添加样式。样式可以根据自己的需求进行自定义。这里我列出一些基本的CSS代码：

<style>
#countdown {
  font-size: 2em;
  text-align: center;
  margin: 20px auto;
  width: 200px;
  height: 50px;
  line-height: 50px;
  background-color: #ddd;
  color: #333;
}
</style>

步骤三：JavaScript部分

现在，让我们来编写JS代码以实现倒计时的自动控制。在这里，我们需要使用 setInterval() 函数来设置定时器。该函数接收两个参数：一个为要执行的函数名，另一个为执行该函数的时间间隔（单位为毫秒）。

<script>
function countdown() {
  // 将目标日期设为倒数第二天的12点整
  var targetDate = new Date("2021-07-13T12:00:00Z");

  // 计算本地时间和目标时间之间的时间差
  var now = new Date();
  var timeDifference = targetDate.getTime() - now.getTime();

  // 计算时间差中的小时、分钟和秒
  var hours = Math.floor(timeDifference / (1000 * 60 * 60));
  var minutes = Math.floor((timeDifference / (1000 * 60)) % 60);
  var seconds = Math.floor((timeDifference / 1000) % 60);

  // 将时间渲染到相应的HTML元素中
  var countdownEl = document.getElementById("countdown");
  countdownEl.innerHTML = hours + ":" + minutes + ":" + seconds;
}

// 每秒钟调用一次倒计时函数
setInterval(countdown, 1000);
</script>

示例一

上面的代码将在每秒钟更新一次 #countdown 元素中的时间。你可以将 targetDate 中的日期更改为你想要的日期，并在 #countdown 元素中查看倒计时的效果。

示例二

如果你要在网站中添加一个倒计时器，那么你可以通过样式来自定义倒计时的外观。

例如：

<style>
.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
}

.countdown-timer span {
  margin-right: 10px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  padding: 10px;
}

.countdown-timer span:last-child {
  margin-right: 0;
}

</style>

<div class="countdown-timer">
  <span id="hours">00</span>:
  <span id="minutes">00</span>:
  <span id="seconds">00</span>
</div>

<script>
function countdown() {
  var targetDate = new Date("2021-12-31T23:59:59Z");
  var now = new Date();
  var timeDifference = targetDate.getTime() - now.getTime();

  var hours = Math.floor(timeDifference / (1000 * 60 * 60));
  var minutes = Math.floor((timeDifference / (1000 * 60)) % 60);
  var seconds = Math.floor((timeDifference / 1000) % 60);

  document.getElementById("hours").innerHTML =
    hours < 10 ? "0" + hours : hours;
  document.getElementById("minutes").innerHTML =
    minutes < 10 ? "0" + minutes : minutes;
  document.getElementById("seconds").innerHTML =
    seconds < 10 ? "0" + seconds : seconds;
}

setInterval(countdown, 1000);
</script>

这个示例中，我们使用 flex 布局来排列 #countdown-timer 容器中的每个元素，并使用 :last-child selector 来去除最后一个元素的右边距，以达到美观的效果。