微信小程序动态显示项目倒计时效果


Posted in Javascript onJune 13, 2017

本文实例为大家分享了微信小程序动态显示项目倒计时的具体代码,供大家参考,具体内容如下

1、一般我们说的显示秒杀都是指的单条数据,循环我没做。

效果:

微信小程序动态显示项目倒计时效果

2、wxml代码:

<p>
<block wx:if="{{total_micro_second<=0}}">剩余时间:已经截止</block>
<block wx:if="{{clock!='已经截止'}}">剩余时间:{{clock}}</block>
</p>

3、.js文件代码:

function countdown(that) {
 var EndTime = that.data.end_time || [];
 var NowTime = new Date().getTime();
 var total_micro_second = EndTime - NowTime || [];
 console.log('剩余时间:' + total_micro_second);
 // 渲染倒计时时钟
 that.setData({
 clock: dateformat(total_micro_second)
 });
 if (total_micro_second <= 0) {
 that.setData({
 clock: "已经截止"
 });
 //return;
 }
 setTimeout(function () {
 total_micro_second -= 1000;
 countdown(that);
 }
 , 1000)
 }

 // 时间格式化输出,如11:03 25:19 每1s都会调用一次
 function dateformat(micro_second) {
 // 总秒数
 var second = Math.floor(micro_second / 1000);
 // 天数
 var day = Math.floor(second/3600/24);
 // 小时
 var hr = Math.floor(second/3600%24);
 // 分钟
 var min = Math.floor(second/60%60);
 // 秒
 var sec = Math.floor(second%60);
 return day + "天" + hr + "小时" + min + "分钟" + sec+"秒";
 }

Page({

 /**
 * 页面的初始数据
 */
 data: {
 id:'',
 result:[],
 end_time:'',
 clock:''
 },/**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 var that = this;
 wx.request({
 url: 'https://m.******.com/index.php/Home/Xiaoxxf/activity_detail?a_id='+options.id,//不含富文本html
 data: {},
 method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
 header: {
 'Content-Type': 'application/json'
 },
 success: function (res) {
 that.setData({
 common: res.data, //一维数组,全部数据
 end_time: res.data.end_time //项目截止时间,时间戳,单位毫秒
 })
 console.log(that.data.common);
 console.log('结束时间:' + that.data.end_time);
 },
 fail: function (res) { },
 complete: function (res) { },
 }), 
//调用上面定义的递归函数,一秒一刷新时间
 countdown(that);
},

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
Javascript中With语句用法实例
May 14 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
深究AngularJS之ui-router详解
Jun 13 #Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 #Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 #Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 #Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 #Javascript
angularjs之$timeout指令详解
Jun 13 #Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 #Javascript
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
用js实现trim()的解决办法
2013/04/16 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
微信小程序简单实现form表单获取输入数据功能示例
2017/11/30 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
python 图片验证码代码分享
2012/07/04 Python
有关wxpython pyqt内存占用问题分析
2014/06/09 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
YBF Beauty官网:美丽挚友,美国知名彩妆品牌
2020/11/22 全球购物
医学院学生的自我评价分享
2013/11/19 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
三八节活动简报
2015/07/20 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android