原生js实现倒计时--2018

本文将介绍如何使用原生js实现一个倒计时效果来迎接2018年的到来。

前置知识

在学习本文之前，请确保您已经具备以下基本的前端知识：
- HTML标记语言
- CSS基础样式及布局
- JavaScript基础知识
- DOM操作基础

HTML代码

首先我们需要在页面上添加一个用于显示倒计时的容器，其结构如下所示：

<div id="countdown">
  <span id="days">0</span>天
  <span id="hours">0</span>小时
  <span id="minutes">0</span>分钟
  <span id="seconds">0</span>秒
</div>

JavaScript代码

接下来，我们需要使用原生js来编写实现倒计时的代码。代码的详细解释请看注释。

// 获取倒计时容器
var countdownContainer = document.getElementById('countdown');

// 计算并更新倒计时时间
function updateTime() {
  // 计算距离2018年1月1日0点0分0秒的时间差
  var now = new Date();
  var target = new Date('2018-01-01 00:00:00');
  var timeDiff = target.getTime() - now.getTime();

  // 将时间差转化为天数、小时数、分钟数和秒数
  var oneDay = 24 * 60 * 60 * 1000;
  var oneHour = 60 * 60 * 1000;
  var oneMinute = 60 * 1000;
  var days = Math.floor(timeDiff / oneDay);
  var hours = Math.floor((timeDiff % oneDay) / oneHour);
  var minutes = Math.floor((timeDiff % oneHour) / oneMinute);
  var seconds = Math.floor((timeDiff % oneMinute) / 1000);

  // 将倒计时时间更新到页面上
  countdownContainer.querySelector('#days').textContent = days;
  countdownContainer.querySelector('#hours').textContent = hours;
  countdownContainer.querySelector('#minutes').textContent = minutes;
  countdownContainer.querySelector('#seconds').textContent = seconds;
}

// 每秒触发一次计算时间的函数
setInterval(updateTime, 1000);

经过上面的代码实现，我们就能实现一个简单的倒计时效果了。需要注意的是，当前页面距离2018年1月1日还很远，我们需要在代码上模拟一下时间过去的效果，否则我们将无法看到倒计时的效果。这个问题可以通过修改目标时间来解决，如将目标时间改为距离当前时间5秒后的时间，代码如下所示：

// 获取倒计时容器
var countdownContainer = document.getElementById('countdown');

// 计算并更新倒计时时间
function updateTime() {
  // 计算距离2018年1月1日0点0分5秒的时间差
  var now = new Date();
  var target = new Date(now.getTime() + 5000); // 5秒后的时间
  var timeDiff = target.getTime() - now.getTime();

  // 将时间差转化为天数、小时数、分钟数和秒数
  var oneDay = 24 * 60 * 60 * 1000;
  var oneHour = 60 * 60 * 1000;
  var oneMinute = 60 * 1000;
  var days = Math.floor(timeDiff / oneDay);
  var hours = Math.floor((timeDiff % oneDay) / oneHour);
  var minutes = Math.floor((timeDiff % oneHour) / oneMinute);
  var seconds = Math.floor((timeDiff % oneMinute) / 1000);

  // 将倒计时时间更新到页面上
  countdownContainer.querySelector('#days').textContent = days;
  countdownContainer.querySelector('#hours').textContent = hours;
  countdownContainer.querySelector('#minutes').textContent = minutes;
  countdownContainer.querySelector('#seconds').textContent = seconds;
}

// 每秒触发一次计算时间的函数
setInterval(updateTime, 1000);

在以上两个示例中，我们使用了原生的JavaScript代码来实现倒计时功能。其中，第一个代码示例仅用于演示效果，第二个代码示例则是实际代码，使用了日期计算等JavaScript基础知识，同时结合了DOM操作，在页面上显示倒计时效果。