Javascript倒计时代码

2023年5月27日下午1:29 • JavaScript

JavaScript 倒计时能够给网站或者应用程序带来极佳的用户体验，它通常用于页面的时间限制、登录等场景。下面是 JavaScript 倒计时的完整攻略。

步骤1：创建 HTML 页面

首先，我们需要在 HTML 页面中添加一个画布元素 canvas 以及 JavaScript 倒计时所需要的 HTML 元素：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 倒计时</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <div id="countdown"></div>
  <script src="countdown.js"></script>
</body>
</html>

这个 HTML 页面中包含了一个画布元素和一个用于放置倒计时的 div 元素。

步骤2：创建 JavaScript 文件

接下来，我们需要创建一个 JavaScript 文件，用于处理倒计时相关的逻辑。

function createCountDown(endtime, elementId) {
  var countdown = document.getElementById(elementId);
  var timeinterval = setInterval(function() {
    var t = getTimeRemaining(endtime);
    var minutes = t.minutes;
    var seconds = t.seconds;
    countdown.innerHTML = '倒计时剩余时间：' + minutes + ' 分钟 ' + seconds + ' 秒';
    if (t.total <= 0) {
      clearInterval(timeinterval);
      countdown.innerHTML = '倒计时结束';
    }
  }, 1000);
}

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  return {
    'total': t,
    'minutes': minutes,
    'seconds': seconds
  };
}

createCountDown('2022-01-01T00:00:00', 'countdown');

这个 JavaScript 文件包含了两个主要的函数：createCountDown 和 getTimeRemaining。

getTimeRemaining 函数用于计算剩余的时间，接受一个参数 endtime 表示倒计时结束时间，返回一个包含剩余时间 total、分钟数 minutes 和秒数 seconds 的对象。

createCountDown 函数用于创建倒计时，它接收两个参数 endtime 和 elementId，分别表示倒计时结束时间和用于显示倒计时的元素 ID。函数内部先获取到需要显示倒计时的元素，然后通过 setInterval 函数每隔一秒钟获取一次剩余时间，然后把剩余时间显示到页面上。

步骤3：添加画布动画

最后，为了增强页面的交互性，我们可以添加一个画布动画，让数字的变化更加平滑和生动。

function createCountDown(endtime, elementId, canvasId) {
  var countdown = document.getElementById(elementId);
  var canvas = document.getElementById(canvasId);
  var context = canvas.getContext('2d');
  var timeinterval = setInterval(function() {
    var t = getTimeRemaining(endtime);
    var minutes = t.minutes;
    var seconds = t.seconds;
    countdown.innerHTML = '倒计时剩余时间：' + minutes + ' 分钟 ' + seconds + ' 秒';
    drawCanvas(context, canvas, minutes, seconds);
    if (t.total <= 0) {
      clearInterval(timeinterval);
      countdown.innerHTML = '倒计时结束';
    }
  }, 1000);
}

function drawCanvas(context, canvas, minutes, seconds) {
  var radius = canvas.height / 2;
  context.beginPath();
  context.arc(radius, radius, radius - 5, 0, 2 * Math.PI);
  context.fillStyle = 'white';
  context.fill();
  context.lineWidth = 5;
  context.strokeStyle = '#345';
  context.stroke();
  context.font = '24px Arial';
  context.fillStyle = '#345';
  context.textAlign = 'center';
  context.textBaseline = 'middle';
  context.fillText(formatTime(minutes) + ':' + formatTime(seconds), radius, radius);
}

function formatTime(time) {
  return time < 10 ? '0' + time : time;
}

createCountDown('2022-01-01T00:00:00', 'countdown', 'myCanvas');

这个修改后的 JavaScript 文件把倒计时显示到了画布上，并且添加了一些动画效果。其中，drawCanvas 函数用于绘制画布内容，包括外边界、倒计时数字和时间文本。formatTime 函数用于格式化时间，将不足两位数的时间补齐。在 createCountDown 函数中，我们加入了画布元素的获取、绘制和清空操作。

示例1：倒计时1分钟

接下来，我们演示一个倒计时1分钟的例子。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 倒计时示例1</title>
</head>
<body>
  <canvas id="myCanvas" width="200" height="200"></canvas>
  <div id="countdown"></div>
  <script src="countdown.js"></script>
  <script>
    createCountDown(new Date(Date.now() + 60 * 1000), 'countdown', 'myCanvas');
  </script>
</body>
</html>

这个 HTML 页面中的 JavaScript 代码用于创建一个倒计时1分钟的计时器。我们通过传入一个 Date 实例来指定倒计时结束时间。

示例2：倒计时10秒

现在，我们演示一个倒计时10秒的例子，但这一次我们只在 DIV 元素中显示倒计时，不需要画布元素的动画效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 倒计时示例2</title>
</head>
<body>
  <div id="countdown"></div>
  <script src="countdown.js"></script>
  <script>
    createCountDown(new Date(Date.now() + 10 * 1000), 'countdown');
  </script>
</body>
</html>

这个 HTML 页面中的 JavaScript 代码用于创建一个倒计时10秒的计时器，只需传入倒计时结束时间和 DIV 元素的 ID。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript倒计时代码 - Python技术站