如果你曾经接触过网页开发,相信一定会听说过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分钟的倒计时啦!