JS 倒计时（微信小程序）

阳光穿透心脏的1/2处 2022-05-11 01:40 282阅读 0赞

下面的例子是微信小程序的写法和web端的都是差不多的，只是显示在页面的写法不一样：

var timer = null;
    
       /**
        * 倒计时
        * @param time 服务端传来的时间戳
        */
       function countdown(time) {
          var that = this;
          timer = setInterval(function () {
             var leftTime = time - new Date().getTime();
    
             //倒计时结束
             if (leftTime <= 1) {
                clearInterval(timer);
                that.setData({
                   m: '00',
                   s: '00',
                   timer: null
                })
                return;
             }
    
             var leftSecond = parseInt(leftTime / 1000);
             var Day = Math.floor(leftSecond / (60 * 60 * 24)); //天数
             var Hour = Math.floor((leftSecond - Day * 24 * 60 * 60) / 3600); //小时
             var Minute = Math.floor((leftSecond - Day * 24 * 60 * 60 - Hour * 3600) / 60); //分钟
             var Second = Math.floor(leftSecond - Day * 24 * 60 * 60 - Hour * 3600 - Minute * 60); //秒数
             if (Minute >= 0 && Second >= 0) {
                that.setData({
                   m: Minute < 10 ? '0' + Minute : Minute,
                   s: Second < 10 ? '0' + Second : Second,
                })
             }
          }, 1000)
       },

### 大概的样子： ###

![70][]

这边是只显示分秒的倒计时，如果想显示剩余几天几时几分几秒的，

可以把 **Day** 和 **Hour** 的值赋值到data里显示到页面即可！

[70]: /images/20220511/e0af0b2f4ab046e096390badf9b0cb2c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，282人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序获取手机号60s倒计时

1.效果：点击获取》60s倒计时》重新获取 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

梦里梦外;/ 2022年12月30日 03:59/ 0 赞/ 205 阅读

相关微信小程序setTimeout实现无限循环倒计时

适用场景: 循环播放视频, 广告,等我这里用一个签到送积分场景广告视频来实现该效果: 我们先来看一下效果: ![watermark_type_ZmFuZ3poZW5n

Bertha 。/ 2022年11月29日 00:49/ 0 赞/ 726 阅读

相关微信小程序实现倒计时

微信小程序倒计时 > 大家好，今天我们来学习一下倒计时的实现，好好看，好好学，超详细的。直接上代码吧 <view class="title-item">倒计

╰半橙微兮°/ 2022年10月09日 06:29/ 0 赞/ 212 阅读

相关小程序倒计时

直接调用函数，传入结束时间的时间戳即可在页面直接输出以下值 countDownDay 天 countDownHour 时 countDownMinute 分

我不是女神ヾ/ 2022年09月05日 04:18/ 0 赞/ 209 阅读

相关寒假小程序（倒计时）

/ Copyright (c) 2014,烟台大学计算机学院 ALL right reserved 文件名：倒计时作者；童宇

怼烎@/ 2022年08月07日 03:39/ 0 赞/ 244 阅读

相关微信小程序圆形进度条倒计时效果

效果如下图： ![20180222115619220][] var initNum = 7 ; //倒计时数 var spaceNum = 1000 ; //文字倒

浅浅的花香味﹌/ 2022年05月31日 10:42/ 0 赞/ 765 阅读

相关微信小程序--日期格式化和实现倒计时

首先看看日期怎么格式化第一种： Date.prototype.Format = function (fmt) { //author: meizz

分手后的思念是犯贱/ 2022年05月26日 02:05/ 0 赞/ 660 阅读

相关 JS 倒计时（微信小程序）

下面的例子是微信小程序的写法和web端的都是差不多的，只是显示在页面的写法不一样： var timer = null; /

阳光穿透心脏的1/2处/ 2022年05月11日 01:40/ 0 赞/ 283 阅读

相关微信小程序发送短信验证码倒计时

效果图 ![在这里插入图片描述][20200827154829168.gif_pic_left] WXML文件 <view class="containe

桃扇骨/ 2021年09月02日 05:52/ 0 赞/ 487 阅读

相关微信小程序活动倒计时

示例效果图： ![20200922140424928.png][] 案列效果图 ![20200922140349157.png][] 代码引用页： {

客官°小女子只卖身不卖艺/ 2021年07月24日 14:08/ 0 赞/ 475 阅读