淘先锋技术网

首页 1 2 3 4 5 6 7

如果你曾经接触过网页开发,相信一定会听说过JavaScript这门编程语言。而其中一个比较常见的应用就是倒计时。倒计时常用于电商网站限时秒杀、抢购等活动,也可以用在各种预定、预约场景中。下面将介绍如何使用JavaScript 倒计时,在页面中展现一个1分钟的倒计时。

<!--HTML结构-->
<div id="countDown"></div>

首先需要创建一个div元素,用于展示倒计时。在JavaScript中,可以先获取该元素:

var countDown = document.getElementById('countDown');

其次,需要确定倒计时的截止时间。如果需要倒计时一分钟,可以通过当前时间加上60秒来计算出截止时间。

var endTime = new Date().getTime() + 60 * 1000;

接下来就是编写倒计时的函数。该函数每秒钟执行一次,更新倒计时的剩余时间,并将其展示到页面中。

function updateCountDown() {
var currentTime = new Date().getTime();
var remainingTime = endTime - currentTime;
var seconds = Math.floor((remainingTime / 1000) % 60);
var minutes = Math.floor((remainingTime / 1000 / 60) % 60);
countDown.innerHTML = minutes + ":" + (seconds< 10 ? "0" : "") + seconds;
}
setInterval(updateCountDown, 1000);

updateCountDown函数主要用于计算剩余时间,并将其展示到页面中。其中用到了Math.floor函数来向下取整,保证数据正确。seconds< 10 ? "0" : ""是为了保证在倒计时不足10秒时,秒数前面加上一个“0”。

最后,只要在页面中引用该JavaScript文件即可:

<script src="countdown.js"></script>

这样,就可以在页面中展示一个1分钟的倒计时啦!