微信小程序动态显示项目倒计时效果
效果:
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
}
微信小程序动态显示项目倒计时效果的更多相关文章
- 微信小程序实现验证码倒计时效果
效果图 wxml <input class='input-pwd' placeholder="新密码" placeholder-style='color: #000' pas ...
- 微信小程序验证码获取倒计时
wxml <button disabled='{{disabled}}' bindtap="goGetCode">{{code}}</button> js ...
- 微信小程序-滚动消息通知效果
这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组件在小程序中是滑块视图容器. 我们通过vertical属性(默认为false,实现默认左右滚动)设置 ...
- 微信小程序60秒倒计时
微信小程序发送短信验证码后60秒倒计时功能,效果图: 完整代码 index.wxml <!--index.wxml--> <view class="container&qu ...
- 微信小程序上手项目
小程序刚发布的时候何其风光,可能大家习惯性的对微信给予了过高的期待,加上一开始小程序的功能确实很孱弱,扫了很多人的兴. 经过最开始的热闹和喧嚣,如今微信小程序热度大减,但随着不断迭代,如今小程序的功能 ...
- 微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
微信小程序+WEB使用JS实现注册[60s]倒计时功能开发步骤: 1.wxml页面代码: <text>绑定手机</text> <form bindsubmit=" ...
- 微信小程序< 3 > ~ 微信小程序开源项目合集
简介 移动开发者想学习微信小程序需要学习一点HTML ,CSS和JS才能够比较快速的上手,参考自己学习Android学习过程,阅读源码是一个很好的方式,所以才收集了一些WeApp的开源项目. awes ...
- (转)微信小程序开发项目——笑话大全
此项目是学习完微信小程序后实现的一个demo,采用聚合数据的免费api获取最新的文本笑话和趣图(图片和gif图) 项目地址:https://github.com/zhijieeeeee/wecha ...
- 微信小程序实现滑动删除效果
在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='li ...
随机推荐
- Tomcat 没有自动解压webapp下的war项目文件问题
默认选择的tomcat安装在了C盘下的C:\Program Files下 所以webapp文件也在C盘下 选择启动tomcat时 我选择了 bin下的 Tomcat.exe 显示成功启动 打开项目网站 ...
- Android Annotations浅析
这阵子遇到了好多事情,挺久没来更新博文了,这两天在学这个开源框架Android Annotations,用起来感觉挺方便的, 相信用过Spring注解的孩子理解起来应该比較easy! 就是配置起来比較 ...
- RTP 时间戳的处理
RTP 时间戳的处理 在RTP传输音频数据时,一般选定逻辑时间戳速率与采样速率相同, 但是在传输视频数据时,必须使时间戳速率大于每帧的一个滴答(这样才能使图像回放更为平滑--<用TCP/IP ...
- flex 布局示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 极光推送sdk使用
创建应用 进入极光控制台后,点击“创建应用”按钮,进入创建应用的界面. 填上你的应用程序的名称以及应用包名这二项就可以了, 最后点击最下方的 “创建我的应用”按钮,创建应用完毕. 创建应用 填 ...
- STL源代码剖析 容器 stl_map.h
本文为senlie原创,转载请保留此地址:http://blog.csdn.net/zhengsenlie map ------------------------------------------ ...
- Python中的__name__
python中if __name__ == '__main__': 的解析 经常会在代码的最下面看到if __name__ == '__main__':,现在就来介 绍一下它的作用. 模块是对象,并且 ...
- sql查询备份或还原等操作的大概完成时间
查询出来的还需完成时间还算比较准确 --查询备份或还原等操作的大概完成时间 select command ,percent_complete ,running_time))+' hour, ' ))+ ...
- Grunt快速使用笔记
本篇文章由:http://xinpure.com/grunt-quick-note/ http://www.gruntjs.net/getting-started Grunt中文网 安装 Grunt ...
- docker运行环境安装-后续步骤(二)
1.以非 root 用户身份管理 Docker [origalom@origalom ~]$ sudo groupadd docker # 创建docker用户组[origalom@origalom ...