效果:

wxml代码:

    

<view class='spellNum'>
<view>
<text style='color: #fff;'>团长</text>
<image src='{{shift}}'></image>
</view>
<image wx:for="{{head}}" src='{{item.buyer_avatar}}'></image>
<view wx:if="{{num==1}}" style='text-align:center'>
<text style='font-size:30rpx;color:#000;line-height:66rpx'>仅剩<text style='color:red'> {{surplus}} </text>个名额 \n</text>
<view>拼团
<text style='color:red'> {{clock}} {{micro_second}}</text> 后结束</view>
</view>
</view>

js文件代码:

// pages/spell/spell.js
let app = getApp()
Page({ /**
* 页面的初始数据
*/
data: {
clock: '',
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this// 参团人数
wx.request({
url: app.baseURL + "act=goods&op=group_info",
data: {
appid: app.appid,
groupbuy_id: options.groupbuy_id,
goods_id: options.goods_id
},
header: {
"content-type": "application/json"
},
success: res => {
console.log(res);
let date = res.data.datas.end_time
console.log('date'+date)
let thisDate = Math.round(new Date() / ) console.log('thisDate'+thisDate)
total_micro_second = date - thisDate
console.log('total_micro_second'+total_micro_second) count_down(that); }) // 定义一个总毫秒数,以一分钟为例。TODO,传入一个时间点,转换成总毫秒数
var total_micro_second = ""; console.log(total_micro_second); /* 毫秒级倒计时 */
function count_down(that) {
// 渲染倒计时时钟
that.setData({
num: "",
clock: dateformat(total_micro_second)
}); if (total_micro_second <= ) {
that.setData({
num: "",
clock: "已经截止"
});
// timeout则跳出递归
return;
}
setTimeout(function () {
// 放在最后--
total_micro_second -= ;
count_down(that);
}
, )
} // 时间格式化输出,如03:25:19 86。每10ms都会调用一次
// function dateformat(micro_second) {
// // 秒数
// var second = Math.floor(micro_second / 1000);
// // 小时位
// var hr = fill_zero_prefix(Math.floor(second / 3600));
// // 分钟位
// var min = fill_zero_prefix(Math.floor((second - hr * 3600) / 60));
// // 秒位
// var sec = fill_zero_prefix((second - hr * 3600 - min * 60));// equal to => var sec = second % 60;
// // 毫秒位,保留2位
// //var micro_sec = fill_zero_prefix(Math.floor((micro_second % 1000) / 10)); // return hr + ":" + min + ":" + sec;
// } function dateformat(micro_second) { // 总秒数
//var second = Math.floor(micro_second / 1000);
var second = micro_second ;
// 天数
var day = Math.floor(second / / );
// 小时
var hr = Math.floor(second / % );
// 分钟
var min = Math.floor(second / % );
// 秒
var sec = Math.floor(second % );
return day + "天" + hr + "小时" + min + "分钟" + sec + "秒";
} // 位数不足补零
function fill_zero_prefix(num) {
return num < ? "" + num : num
}

微信小程序动态显示项目倒计时效果的更多相关文章

  1. 微信小程序实现验证码倒计时效果

    效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...

  2. 微信小程序验证码获取倒计时

    wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...

  3. 微信小程序-滚动消息通知效果

    这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...

  4. 微信小程序60秒倒计时

    微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...

  5. 微信小程序上手项目

    小程序刚发布的时候何其风光,可能大家习惯性的对微信给予了过高的期待,加上一开始小程序的功能确实很孱弱,扫了很多人的兴. 经过最开始的热闹和喧嚣,如今微信小程序热度大减,但随着不断迭代,如今小程序的功能 ...

  6. 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能

    微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...

  7. 微信小程序< 3 > ~ 微信小程序开源项目合集

    简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...

  8. (转)微信小程序开发项目——笑话大全

    此项目是学习完微信小程序后实现的一个demo,采用聚合数据的免费api获取最新的文本笑话和趣图(图片和gif图)   项目地址:https://github.com/zhijieeeeee/wecha ...

  9. 微信小程序实现滑动删除效果

    在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...

随机推荐

  1. Tomcat 没有自动解压webapp下的war项目文件问题

    默认选择的tomcat安装在了C盘下的C:\Program Files下 所以webapp文件也在C盘下 选择启动tomcat时 我选择了 bin下的 Tomcat.exe 显示成功启动 打开项目网站 ...

  2. Android Annotations浅析

    这阵子遇到了好多事情,挺久没来更新博文了,这两天在学这个开源框架Android Annotations,用起来感觉挺方便的, 相信用过Spring注解的孩子理解起来应该比較easy! 就是配置起来比較 ...

  3. RTP 时间戳的处理

    RTP 时间戳的处理   在RTP传输音频数据时,一般选定逻辑时间戳速率与采样速率相同, 但是在传输视频数据时,必须使时间戳速率大于每帧的一个滴答(这样才能使图像回放更为平滑--<用TCP/IP ...

  4. flex 布局示例

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 极光推送sdk使用

    创建应用 进入极光控制台后,点击“创建应用”按钮,进入创建应用的界面. 填上你的应用程序的名称以及应用包名这二项就可以了, 最后点击最下方的 “创建我的应用”按钮,创建应用完毕.   创建应用   填 ...

  6. STL源代码剖析 容器 stl_map.h

    本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie map ------------------------------------------ ...

  7. Python中的__name__

    python中if __name__ == '__main__': 的解析 经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且 ...

  8. sql查询备份或还原等操作的大概完成时间

    查询出来的还需完成时间还算比较准确 --查询备份或还原等操作的大概完成时间 select command ,percent_complete ,running_time))+' hour, ' ))+ ...

  9. Grunt快速使用笔记

    本篇文章由:http://xinpure.com/grunt-quick-note/ http://www.gruntjs.net/getting-started Grunt中文网 安装 Grunt ...

  10. docker运行环境安装-后续步骤(二)

    1.以非 root 用户身份管理 Docker [origalom@origalom ~]$ sudo groupadd docker # 创建docker用户组[origalom@origalom ...