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技术站