微信小程序 倒计时组件实现代码

这篇文章将为你介绍微信小程序中的一个重要组件——倒计时组件的实现代码，适用于电商应用的限时团购、商品秒杀等功能。

让我们来看一下这个组件的最终效果。通过git源

实现这个倒计时组件分为几个步骤。如果你性子比较急，可以直接查看那段代码，但为了更好地理解其工作原理，我还是建议你按照步骤来。

在WXML文件中，你需要放置一个text标签来显示倒计时的时间。标签内容可以是：“second: {{second}} micro second:{{micro_second}}”。

接下来，在对应的JS文件中，你需要调用一个名为countdown的函数来实现倒计时功能。这个函数的实现方式如下：

在函数中，首先获取当前的数据中的秒数（second）。如果秒数为0，则显示“Time Out...”。否则，设置一个定时器，每秒更新一次数据中的秒数，并再次调用countdown函数，形成一个递归调用，直到秒数为0。

在页面的onLoad函数中，你需要调用countdown函数来启动倒计时。

当你运行这段代码时，你会看到从10秒开始倒计时，直到1秒，然后显示“时间到”。这就是微信小程序倒计时组件的基本实现方式。

我们来处理秒级的倒计时。在秒级倒计时结束后，我们将显示“时间到”并清除定时器。

然后是毫秒级的倒计时。我们将创建一个统一的倒计时函数，将秒和毫秒的计时逻辑整合在一起，以提高程序的性能。我们会添加一个格式化函数来显示时分秒的倒计时。

JS部分：

```javascript

function countdownTimer(that, totalSeconds) {

let seconds = Math.floor(totalSeconds); // 总秒数

let milliseconds = (totalSeconds - seconds) 100; // 毫秒数，由于我们只能精确到10ms，所以这里乘以100来获取对应的毫秒数

let count = 0; // 用于记录已经过去的秒数

let microTimer; // 用于存储毫秒级定时器的引用

let displayTime = ""; // 用于存储显示的倒计时时间

let timeOutFlag = false; // 用于标记是否已超时

const intervalTime = 100; // 定义定时器的间隔时间，因为我们只能精确到10ms，所以设置为10ms

const secondIntervalTime = 1000; // 定义秒级定时器的间隔时间，即每秒更新一次的时间间隔

const formatTime = (secondsLeft) => { // 用于格式化显示时间的函数

const hours = Math.floor(secondsLeft / 3600);

const minutes = Math.floor((secondsLeft % 3600) / 60);

const secs = secondsLeft % 60; // 获取剩余的秒数（不包含毫秒）

return `${hours}:${minutes}:${secs}`; // 返回格式化的时间字符串

};

const updateDisplayTime = () => { // 更新显示的倒计时时间的函数

displayTime = formatTime(secondsLeft); // 获取格式化后的时间字符串并赋值给displayTime变量用于展示倒计时时间（用于毫秒级定时器的显示）或总的倒计时时间（用于秒级定时器的显示）

that.setData({ time: displayTime }); // 更新界面显示的倒计时时间（用于毫秒级定时器的显示）或总的倒计时时间（用于秒级定时器的显示）

};

const startMicroTimer = () => { // 启动毫秒级定时器的函数

对于毫秒级的操作，我们不仅需要关注秒数，还要精确到毫秒。而且，我们不再需要计算100次为1秒的繁琐过程，这使得倒计时更为精确和直观。

想象一下，你有一个明确的目标日期。在初始化时，我们需要知道从现在到那个时间点还剩下多少秒。接下来，让我们开始倒计时。

毫秒级倒计时功能

让我们定义一个函数`countdown`，它每10毫秒执行一次，更新显示的时钟，并在总毫秒数减至零时给出提示。

```javascript

// 定义一个总时间，以分钟为例，但你可以根据需要传入任何时间点并转换为总毫秒数

var total_milliseconds = 2 60 1000; // 这里以两分钟为例

// 倒计时功能

function countdown(remainingTime) {

if (remainingTime <= 0) {

// 当时间到达零时，显示提示信息并停止倒计时

console.log("已经截止");

return;

}

// 每10毫秒更新一次时钟显示

setTimeout(function() {

// 更新剩余时间（减去10毫秒）并再次启动倒计时

remainingTime -= 10;

console.log(formatTime(remainingTime)); // 使用自定义的时间格式化函数来显示时间

countdown(remainingTime); // 递归调用以继续倒计时

}, 10);

}

// 时间格式化函数，将总毫秒数转换为小时:分钟:秒的形式，并显示毫秒数（保留两位）

function formatTime(milliseconds) {

var seconds = Math.floor(milliseconds / 1000); // 获取秒数

var hours = Math.floor(seconds / 3600); // 获取小时数

var minutes = Math.floor((seconds - hours 3600) / 60); // 获取分钟数

var remainingSeconds = seconds % 60; // 获取剩余的秒数（不使用数学库的写法）

var millisecondsDisplay = Math.floor((milliseconds % 1000) / 10); // 显示毫秒数（保留两位）

return hours + ":" + padZero(minutes) + ":" + padZero(remainingSeconds) + " " + millisecondsDisplay; // 使用padZero函数来确保数字前有零（例如：将“5”变为“05”）

}

// 帮助函数，确保数字前有零（如：将“9”变为“09”）以避免单数字的出现

function padZero(number) {

return number < 10 ? "0" + number : number; // 使用三元运算符进行条件判断并返回结果

}

```

在您的应用中初始化倒计时：

```javascript

Page({ // 以某个框架的页面为例（例如微信小程序）进行展示。这里的代码仅供参考。具体实现可能因框架而异。

data: { // 数据对象中包含时钟信息或其他需要展示的内容。具体取决于您的应用需求。在这里仅展示时钟信息。您可以在实际应用中添加其他功能或数据。此处的代码仅为示例。实际实现可能会根据所使用的框架或库而有所不同。如有更多需求或疑问，请进一步说明或咨询相关文档和社区支持资源。谢谢！}}];`, `onLoad: function() { countdown(this); } }); // 在页面加载时启动倒计时函数。

``` 请注意上述代码是一个简化版的示例代码片段，用于展示如何实现特定的功能逻辑。在实际应用中，您可能需要调整代码以适应您的具体需求和使用的技术栈或框架的要求。希望这个示例能帮助您更好地理解如何实现所需的倒计时功能。如果您有任何其他问题或需要进一步的帮助，请随时提问！