基于javascript显示当前时间以及倒计时功能

2023年5月27日下午12:19 • JavaScript

下面是“基于JavaScript显示当前时间以及倒计时功能”的完整攻略，分为两步：显示当前时间、制作倒计时。

1. 显示当前时间

步骤1：创建HTML文件

首先，需要创建一个HTML文件，例如index.html。

<!DOCTYPE html>
<html>
  <head>
    <title>显示当前时间</title>
  </head>
  <body>
    <p id="currentTime"></p>
    <script src="main.js"></script>
  </body>
</html>

这里创建了一个包含一个<p>标签的HTML页面，并在<script>标签中引入一个JavaScript文件main.js，该文件用于更新时间。

步骤2：编写JavaScript代码

接下来，需要在main.js文件中编写JavaScript代码，用于显示当前时间。

function updateTime() {
  const currentTime = new Date()
  const hours = currentTime.getHours()
  const minutes = currentTime.getMinutes()
  const seconds = currentTime.getSeconds()
  const timeString = `${hours}:${minutes}:${seconds}`
  document.getElementById('currentTime').innerText = timeString
}

setInterval(updateTime, 1000)

以上代码首先定义了一个updateTime函数，用于获取当前时间并将其显示在页面上。然后使用setInterval函数每隔1秒钟调用一次updateTime函数，以实时更新时间。

步骤3：运行HTML文件

最后，可以在浏览器中打开index.html文件，即可看到页面上显示出当前的时间。

2. 倒计时功能

步骤1：创建HTML文件

同样需要创建一个HTML文件，例如countdown.html。

<!DOCTYPE html>
<html>
  <head>
    <title>倒计时</title>
  </head>
  <body>
    <div>
      <label for="countdown">设置倒计时时间：</label>
      <input type="text" id="countdown" placeholder="格式为 2022-01-01 00:00:00" />
      <button onclick="startCountdown()">开始倒计时</button>
    </div>
    <p id="countdownDisplay"></p>
    <script src="main.js"></script>
  </body>
</html>

这里创建了一个包含一个输入框和一个按钮的HTML页面，并在<script>标签中引入一个JavaScript文件main.js，用于倒计时的代码。

步骤2：编写JavaScript代码

接下来，需要在main.js文件中编写JavaScript代码，用于实现倒计时功能。

function startCountdown() {
  const countdownInput = document.getElementById('countdown')
  const countdownDisplay = document.getElementById('countdownDisplay')

  const countdownDate = new Date(countdownInput.value)

  setInterval(() => {
    const now = new Date().getTime()
    const distance = countdownDate.getTime() - 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)

    const countdownString = `${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`

    countdownDisplay.innerText = countdownString
  }, 1000)
}

以上代码定义了一个startCountdown函数，用于获取用户在输入框中设定的倒计时时间，并每秒钟更新显示倒计时时间的文本内容。