今天做程序要做个限时抢购的功能如图:

先上代码:

源码

index.wxml    可根据自己实际需求改改

<view class="div-content-warp">
<block wx:for="{{xsqg}}" wx:key="*this">
<view class="div-qgcontent">
<view class='img-absolute'>
<view class='red padtop10'>
<image class='time-img' src="../../image/img/time.png"></image>
<text class='time'> {{clock[index]}} </text>
</view>
<view class="category-url" bindtap="cateTap" data-cateId="{{item.id}}">
<image class="img-limet" src="../../image/img/xian1.png"></image>
<image class="shop" src="{{item.pic}}"></image>
<view class='del'>原价:{{item.yj}}</view>
<view class='red qgj'>抢购价:{{item.lowest}}</view>
</view>
</view>
</view>
</block>
</view>
由于 他是4个倒计时并且每个还是单独的倒计时 所以用了数组  在循环的时候通过数组的key取值 {{clock[index]}} 
index.js
Page({
data: {
clock: []
},
onLoad: function (options) {
var that = this;
util.http("https://www.***.com/index.html", "", this.product);
},
product: function (data) {
console.log(data);
this.setData({
xsqg: data.xsqg
}) var interval = setInterval(function () {
//将时间传如 调用
var clock = forea(data.xsqg); this.setData({//正常倒计时
clock: clock
});
}.bind(this), 1000);
} })
function forea(timetot) {
var clockarr = [];
var timenow = Date.parse(new Date()) / 1000;
for (var i = 0; i < 4; i++) { var totalSecond = timetot[i].end_time - timenow;
var totalstart = timetot[i].start_time - timenow;
if (totalstart > 0) {
var time = '未开始';
} else if (totalSecond < 0) {
var time = '已结束';
} else {
var time = dateformat(totalSecond);
}
clockarr.push(time);
}
return clockarr;
} // 时间格式化输出,将时间戳转为 倒计时时间
function dateformat(micro_second) { var second = micro_second;//总的秒数 // 天数位
var day = Math.floor(second / 3600 / 24);
var dayStr = day.toString();
if (dayStr.length == 1) dayStr = '0' + dayStr; // 小时位
//var hr = Math.floor(second / 3600 % 24);
var hr = Math.floor(second / 3600); //直接转为小时 没有天 超过1天为24小时以上 var hrStr = hr.toString();
if (hrStr.length == 1) hrStr = '0' + hrStr; // 分钟位
var min = Math.floor(second / 60 % 60);
var minStr = min.toString();
if (minStr.length == 1) minStr = '0' + minStr; // 秒位
var sec = Math.floor(second % 60);
var secStr = sec.toString();
if (secStr.length == 1) secStr = '0' + secStr; return hrStr + ":" + minStr + ":" + secStr; }

难点就是一个的话好控制,4个需要同时倒计,怎么才能同时刷??

思路:

将倒计时的时间放入数组封装成方法  然后用  setInterval调用每1000毫秒调用一次。

在做的过程中出现的问题:

(1)把for 循环写在了setInterval 中只执行一次 不知道为什么

(2)数组每次都循环但是 数组里面的值不变?? 后来把他单独摘出来 分开调用


有不对的地方,大家批评指正。

微信小程序倒计时的更多相关文章

  1. 微信小程序倒计时组件开发

    今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...

  2. 微信小程序 倒计时

    这两天在看微信小程序,参考了网上的资料,做了一个倒计时的练习,记录如下. 本文作者:罗兵 原地址:https://www.cnblogs.com/hhh5460/p/9981064.html 0.效果 ...

  3. 微信小程序——倒计时功能

    做小程序项目中,需要做一个倒计时功能,如下图: 记录一下实现步骤: 1.考虑到这个功能可能会有多处用到,所以把倒计时的函数写在utils.js里面: const formatNumber = n =& ...

  4. 微信小程序倒计时实现

    思路:跟一般js倒计时一样,主要在于this的变相传递. 实现效果: wxml文件部分代码: common.js文件 : 引用页JS文件: PS: 1.在data里初始化时间格式,是避免时间加载的第1 ...

  5. 微信小程序倒计时的方法

    timeOut: function(time) { var that = this; var end = new Date(time).getTime(); var Interval = setInt ...

  6. 微信小程序倒计时实现功能

    onLoad: function () {    var that=this;    this.data.intervarID= setInterval(function () {      var ...

  7. 微信小程序源码推荐

    wx-gesture-lock  微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...

  8. 微信小程序案例大全

    微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...

  9. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. Java-TreeSet的用法-入门

    Java语言中,Set接口有3种通用实现:HashSet, TreeSet,LinkedHashSet.TreeSet是一种能够对内部元素进行排序的集合,它使用红黑树来存储内部元素,基于元素的值进行排 ...

  2. del命令实现全盘删除指定文件

    @echo off Rem :全盘删除指定文件 set "fileName=Normal.dotm" set "outPutPath=C:\result.txt" ...

  3. 《JAVA程序设计》第11周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. synchronized方法/代码块 wait().notify()用法,生产者消费者例子 lock.condit ...

  4. 201521123073 《Java程序设计》第14周学习总结

    14周-数据库 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入. ...

  5. 201521123022 《Java程序设计》 第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 Q1.finally 题目4-2 Q1.1 截图你的提交结果 ...

  6. python 浅析对return的理解

    最近很忙,但是还是很认真的学习python这个东西,不是出于什么目的,只是单纯的喜欢罢了.最近学习的东西比较简单,但是也遇到了一些问题,就是比较迷惑人的问题,今天小编就在这里讲讲自己的对return的 ...

  7. WPF(C#) 矩阵拖动、矩阵动画、边缘展开动画处理。

    最近在研发新的项目,遇到了一个桌面模式下的难点--展开动画.之前动画这方面没做过,也许很多人开始做的时候也会遇到相关问题,因此我把几个重点及实际效果图总结展示出来: 我的开发环境是在VS2017下进行 ...

  8. centOS 6启动流程

      centOS6启动流程 centOS6启动流程 linux内核组成 centos6启动大致流程 1.post加电自检 2.Boot Sequence 3.MBR引导 4.Grub启动 制作init ...

  9. 关于使用git和github的一点点感想

    第二篇博客 首先附上我的第一个java程序github地址: https://github.com/KingsC123456/FirstJavaHello 其次是关于我的github介绍,因为一直使用 ...

  10. 一文搞懂各种 Docker 网络 - 每天5分钟玩转 Docker 容器技术(72)

    前面各小节我们先后学习了 Docker Overaly,Macvaln,Flannel,Weave 和 Calico 跨主机网络方案.目前这个领域是百家争鸣,而且还有新的方案不断涌现. 本节将从不同维 ...