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


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的用鼠标画出可移动的div
Sep 06 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
jQuery双向列表选择器select版
Nov 01 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
Angular中的$watch、$watchGroup、$watchCollection
Jun 25 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
layui实现数据表格隐藏列的示例
Oct 25 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
php flv视频时间获取函数
2010/06/29 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php与js的区别是什么
2013/08/05 Javascript
JavaScript中发布/订阅模式的简单实例
2014/11/05 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
微信小程序中setInterval的使用方法
2017/09/29 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
2018/04/10 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
用node.js写一个jenkins发版脚本
2019/05/21 Javascript
python遍历目录的方法小结
2016/04/28 Python
windows下python之mysqldb模块安装方法
2017/09/07 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
详解【python】str与json类型转换
2019/04/29 Python
Python3+Appium安装使用教程
2019/07/05 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
生产副总岗位职责
2013/11/28 职场文书
运动会通讯稿50字
2014/01/30 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
赤壁观后感(2)
2015/06/15 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
 python中的元类metaclass详情
2022/05/30 Python