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


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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
js剪切板应用clipboardData实例解析
May 29 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
react实现点击选中的li高亮的示例代码
May 24 Javascript
vue检测对象和数组的变化分析
Jun 30 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 Javascript
vue接口请求加密实例
Aug 11 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
php4的session功能评述(三)
2006/10/09 PHP
PHP __autoload()方法真的影响性能吗?
2012/03/30 PHP
Codeigniter操作数据库表的优化写法总结
2014/06/12 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php文件读取方法实例分析
2015/06/20 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
javascript new后的constructor属性
2010/08/05 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
JS求平均值的小例子
2013/11/29 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
西班牙拥有最佳品牌的动物商店:Animalear.com
2018/01/05 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
开办饭店创业计划书
2013/12/28 职场文书
初婚初育证明
2014/01/14 职场文书
教师队伍管理制度
2014/01/14 职场文书
领导干部考察材料
2014/02/08 职场文书
2014全国两会大学生学习心得体会
2014/03/10 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
父母教会我观后感
2015/06/17 职场文书
校运会新闻稿
2015/07/17 职场文书