小程序倒计时实现方法

<!-- 低价秒杀 -->
<view class='con price-secondkill'><view class='catename clearfix'><view class='tex-01'>低价秒杀</view><view class='tex-02 clearfix'><view>距结束</view><view class='num'>{{mkill.hou}}</view><view>:</view><view  class='num'>{{mkill.min}}</view><view>:</view><view class='num'>{{mkill.sec}}</view></view><view class='tex-03' bindtap="discountMoreTap">查看更多></view></view><view class='discount-list'><block wx:for="{{discountList}}"><view class='item clearfix'><view class='img'><image src='{{item.course.img}}' style='width:100%;' mode='widthFix'></image></view><view class='tex'><view class='tex-top'><text>{{item.course.name}}</text><text>{{item.course.info}}</text>    </view><view class='texts'><view class='price'><text>￥{{item.price}}</text><text>￥{{item.course.price_original}}</text></view><view class='num'><button bindtap="bindCourseView" data-id="{{item.course.id}}">立即秒杀</button></view></view></view></view></block></view>
</view>

  /*倒计时*/countDown:function() {//倒计时函数// 获取当前时间，同时得到活动结束时间数组let newTime = new Date().getTime();let actEndTime = this.data.actEndTime.replace(/-/g, "/");let endTime = new Date(actEndTime).getTime();let obj = [];// 如果活动未结束，对时间进行处理if (endTime - newTime > 0) {let time = (endTime - newTime) / 1000;// 获取时、分、秒let hou = parseInt(time % (60 * 60 * 24) / 3600);let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);obj = {hou: this.timeFormat(hou),min: this.timeFormat(min),sec: this.timeFormat(sec)}} else {//活动已结束，全部设置为'00'obj = {hou: '00',min: '00',sec: '00'}}// 渲染，然后每隔一秒执行一次倒计时函数this.setData({mkill: obj})setTimeout(this.countDown, 1000);},

需要注意苹果手机倒计时不显示，原因是：IOS不支持2019-08-28 14:01:30这种格式，只需要将 - 替换为 / 即可解决：

var remainDate = "2019-08-28 14:01:30";
var newRemainDate =  remainDate .replace(/-/g, "/")    //转换后即可兼容啦

wxss就不往外贴了，根据不同的需求，直接写样式即可

小程序倒计时实现方法相关推荐

微信小程序倒计时实现
微信小程序倒计时实现 a.wxml <view class="daojishi"><text>{{day}}</text>天<text&g ...
云开发小程序倒计时防刷新功能及签到功能
小程序倒计时防刷新功能这是一个不美好的事情,我使用的是vant的倒计时,不管什么倒计时,刷新后倒计时就会重新开始.从晚上查到下班,从回家查到11点,结果没找到,没办法了自己写,结果10min写出来了 ...
想要快速获客？送你 2 个小程序互推方法
在之前的小程序问答中,我们向大家介绍了公众号向小程序引流的方法. 那么,小程序可以给其他小程序引流吗?答案自然是肯定的. 今天,笔者就来手把手教你,小程序之间如何互相跳转.引导. 在小程序中,有两个方 ...
微信小程序对request方法二次封装
微信小程序跟支付宝小程序都提供了一个发起 HTTPS 网络请求的方法request,那么为了节省一些操作我们有必要对它进行一个二次的封装 1.在app.js里配置baseUrl // 注册一个小程序 ...
微信小程序开发系列教程三：微信小程序的调试方法
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hel ...
微信小程序定义公共方法
微信小程序定义公共方法还是很简单的,一个三步创建,引入,使用 1.创建在page创建文件夹utils,在创建文件utils.js,看下我的在utils.js中定义你的方法,然后导出 2.引入在你 ...
解决微信小程序 wx.request 方法不支持 Promise 并发数问题
wx-promise-request 是微信小程序 wx.request 方法的不支持 Promise 和并发数问题的解决方案.如果只需要解决并发数问题,可以使用wx-queue-request.js ...
微信小程序抓包方法汇总
前言 ios端和mac用户可以忽略以下内容,本文针对于windows端和android端的微信无法抓取小程序数据包提出相关解决方案. 分析 Android7. 0及以上的系统中,每个应用可以定义自己的 ...
微信小程序使用setData方法修改data中对象或数组的属性值
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序使用setData方法修改data中对象或数组的属性值使用微信小程序开发时,涉及到data ...
微信小程序倒计时，购物车，向左滑删除左拉删除
微信小程序倒计时 :https://gitee.com/dotton/CountDown 微信小程序购物车功能,全选,价格叠加:https://www.cnblogs.com/linxin/p/683 ...

小程序倒计时实现方法

小程序倒计时实现方法相关推荐

最新文章

热门文章