微信小程序中活动倒计时的效果怎样做？倒计时的功能应用场景有很多，例如答题倒计时，商城活动倒计时等等，这里我们主要来接微信小程序中活动倒计时功能的实现，有一定的参考价值，感兴趣的朋友就继续往下看吧。

商城商品中的活动倒计时

js

var endTime = new Date().getTime() + 24 * 3600 * 1000*4;

Page({

 /**
 * 页面的初始数据
 */
 data: {
 headerImgs: postData.postSwiperData,
 countDownDay: '',
 countDownHour: '',
 countDownMinute: '',
 countDownSecond: '',
 },

 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function(options) {
 var id = options.id; //页面跳转传过来的值
 },
 onReady: function() {
 var that = this;

 countdown(that);
 }
})

function countdown(that) {
 var NowTime = new Date().getTime();
 var EndTime = endTime;
 var total_micro_second = EndTime - NowTime || [];
 console.log('当前时间'+NowTime+'\n剩余时间：' + total_micro_second);
 // 渲染倒计时时钟
 that.setData({
 countDownDay: dateformaDay(total_micro_second),
 countDownHour: dateformaHour(total_micro_second),
 countDownMinute: dateformaMinute(total_micro_second),
 countDownSecond: dateformaSecondMinute(total_micro_second),
 });
 // if (total_micro_second <= 0) {
 // that.setData({
 // clock: "已经截止"
 // });
 // //return;
 // }
 setTimeout(function() {
 total_micro_second -= 1000;
 countdown(that);
 }, 1000)
}

// 时间格式化输出
function dateformaDay(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 天数
 var day = Math.floor(second / 3600 / 24);
 return day;
}

function dateformaHour(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 小时
 var hr = Math.floor(second / 3600 % 24);
 return hr;
}

function dateformaMinute(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 分钟
 var min = Math.floor(second / 60 % 60);
 return min;
}

function dateformaSecondMinute(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 秒
 var sec = Math.floor(second % 60);
 return sec;
}

wxml

<!-- 倒计时 start -->
 <view style='display:flex;flex-direction:column;'>
 <span style="font-size:10px;color:white;margin-top:5px;">距活动结束还剩</span>
 <view class='time-container'>
 <text class='time-number'>{{countDownDay}}</text>
 <span class='time-text'>天</span>
 <text class='time-number'>{{countDownHour}}</text>
 <span class='time-text'>时</span>
 <text class='time-number'>{{countDownMinute}}</text>
 <span class='time-text '>分</span>
 <text class='time-number '>{{countDownSecond}}</text>
 <span class='time-text '>秒</span>
 </view>
 </view>
<!-- 倒计时 end -->

wxss

.time-container {
 display: flex;
 flex-direction: row;
 margin-top: 10px;
 margin-bottom: 10px;
 margin-right: 10px;
 align-items: center;
}

.time-number {
 background: white;
 color: red;
 width: 18px;
 height: 18px;
 font-size: 12px;
 border-radius: 3px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.time-text {
 font-size: 10px;
 color: white;
 margin: 3px;
}

    关于微信小程序倒计时功能的实现就介绍到这，这里只是分享了一种实现倒计时功能的方法，希望本文对大家学习或者功能能有帮助，想要了解更多大家可以关注其它的相关文章。

文本转载自脚本之家

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• 用JS怎样实现类似淘宝tab切换栏的功能？

  用JS怎样实现类似淘宝tab切换栏的功能？tab切换栏的功能还是比较实用的，例如淘宝页面的商品详情，规格参数和累计评价三个栏，点击不同的栏下面出现的内容不同，这样的设计的好处就是能让页面更整洁美观，接下来我们就看看这个效果要怎样做。

• Vue组件化的相关知识有哪些，怎样理解

  目录1、ref属性2、props配置项props总结3、mixin混入3.1、局部混入3.2、全局混入mixin混入总结4、插件插件总结1、ref属性被用来给元素或子组件注册引用信息（id的替代者）应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）使用方式：打标识：h1 ref=xxx.

• 基于Three.JS怎样实现转动的球体效果

  目录前言ThreeJS 基础——实现转动的球体ThreeJS 纹理——实现转动的地球交互式雪糕地球添加 loading 效果前言最近的天气有几分酷热，去实验室的道路也有几分漫长，走着走着，小包感觉灵魂已经被热出窍了。回到实验室，把空调打开，雪糕吃上，静坐了几分钟，才重新感觉到灵魂的滋味，葛优躺在实验室的小床上，思维开始

• JavaScript深拷贝概念是什么，有哪些实现方式

  这篇文章主要为大家介绍了javascript进阶篇深拷贝实现的四种方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• 事件驱动如何用于浏览器中的JS及Node.js

  这篇文章主要介绍了JS和Nodejs中的事件驱动，对事件驱动感兴趣的同学，可以参考下