小程序列表倒计时 wxs 实现
效果
代码
js
//拿到服务器时间
var serverLocalDate = data.serverLocalDate; //调用函数开始计时
this.serverLocalDate(serverLocalDate); //服务器系统时间开始计时
serverLocalDate: function(serverLocalDate) {
var _this = this;
let newDate = (serverLocalDate).replace(/-/g, '/'); // 获取服务器时间
var systimestamp = new Date(newDate).getTime();
_this.setData({
servicetimeInterval: setInterval(function() { // 循环执行
systimestamp = (systimestamp / 1000 + 1) * 1000;
_this.setData({
systimestamp: systimestamp
})
}, 1000)
})
},
wxs
var formatterTimer = function (systimestamp, compareTime) {
var result = {};
var nowTime = systimestamp;// 当前时间的时间戳 也就是系统时间戳
var futureTime = getDate(compareTime).getTime();// 比较时间的时间戳
// 未来的时间减去现在的时间 ;
var resTime = (futureTime - nowTime) / 1000;
// 结束时间
var zero = futureTime - nowTime;
if (zero >= 0) { // 认为还没有到达结束的时间
result.h_h = (Math.floor(resTime / 3600)) < 10 ? '0' + (Math.floor(resTime / 3600)) : (Math.floor(resTime / 3600));
result.m_m = (Math.floor(resTime / 60) % 60) < 10 ? '0' + (Math.floor(resTime / 60) % 60) : (Math.floor(resTime / 60) % 60);
result.s_s = (resTime % 60) < 10 ? '0' + (resTime % 60) : (resTime % 60);
result.status = true;
} else {
result.h_h = '00';
result.m_m = '00';
result.s_s = '00';
result.status = false;
}
return result;
};
module.exports = {
formatterTimer: formatterTimer,
}
wxml //先引入自己创建的wxs 也可以将方法直接写到页面内
<wxs src="../../../utils/tools.wxs" module="countdown" /> //倒计时方法内 返回参数可以根据自己的需要自行调整
<view class='daojishi '>
<text class='font20 colorF'>剩余时间</text>
<view class='font18'>{{countdown.formatterTimer(systimestamp,ol.endDate).h_h}}</view>
<text class='font18'>:</text>
<view class='font18'>{{countdown.formatterTimer(systimestamp,ol.endDate).m_m}}</view>
<text class='font18'>:</text>
<view class='font18'>{{countdown.formatterTimer(systimestamp,ol.endDate).s_s}}</view>
</view>
小程序列表倒计时 wxs 实现的更多相关文章
- 微信小程序 列表倒计时
最近要实现一个列表倒计时的功能,写了个demo 展示图 <view class="center colu"> <view class="time&quo ...
- 小程序脚本语言WXS详解
WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就 ...
- 微信小程序-列表渲染多层嵌套循环
微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...
- 微信小程序之倒计时插件 wxTimer
微信小程序之倒计时插件 wxTimer 介绍: 用于在微信小程序中进行倒计时的组件. 功能: 1.最基础的当然就是倒计时功能了. 2.可以设置倒计时结束后执行的事件. 3.可以设置倒计时执行过程中 ...
- 小程序脚本语言WXS,你想要的都在这里了
WXS脚本语言是 Weixin Script脚本的简称,是JS.JSON.WXML.WXSS之后又一大小程序内部文件类型.截至到目前小程序已经提供了5种文件类型. 解构小程序的几种方式,其中一种方式就 ...
- 小程序使用之WXS
文章链接:https://mp.weixin.qq.com/s/F1zzS7mvMpFaplq4KINzQg 之前做过一段时间的小程序开发,自己也写过两个自己的小程序,了解些前端的知识,相对而言还是比 ...
- 微信小程序列表项滑动显示删除按钮
微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来 ...
- 微信小程序列表加载更多
概述 基于小程序开发的列表加载更多例子. 详细 代码下载:http://www.demodashi.com/demo/13632.html 一.前言 基于小程序开发的列表加载更多例子. 二.运行效果 ...
- 微信小程序 - 考试倒计时
源码如下(csdn提供了思路 , 多谢 ,第二个小程序项目,有惊无险(_._): Page({ /** * 页面的初始数据 */ data: { timer: '', //定时器名字 countDow ...
随机推荐
- S02_CH03_EMIO实验Enter a post title
S02_CH03_EMIO实验 3.1 EMIO 和MIO的对比介绍 上次讲到MIO的使用,初步熟悉了EDK的使用,这次就来说说EMIO的使用.如你所见zynq的GPIO,分为两种,MIO(multi ...
- Unable to find optional library: org.apache.http.legacy 错误
在目录adt-bundle-windows-x86_64-20140702\sdk\platforms\android-20或者 C:\Users\Administrator\AppData\Loca ...
- POJ 1860 汇率 SPFA
题意 有多种汇币,汇币之间可以交换,这需要手续费,当你用100A币交换B币时,A到B的汇率是29.75,手续费是0.39,那么你可以得到(100 - 0.39) * 29.75 = 2963.3975 ...
- hdu 3371 有毒的卡时间题目
同样的代码 每次交的结果都不一样 #include<stdio.h> #include<string.h> #include<stdlib.h> #include& ...
- vue中$router 与 $route区别
vue-router中经常会操作的两个对象\(route和\)router两个. 1.$route对象 $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息.包含当前的路径,参数,q ...
- BaseHandler的封装, 处理handler中的内存泄漏
package de.bvb.study.common; /** * 用于规范 Message.what此属性,避免出现魔法数字 */ public final class What { public ...
- Nodejs:单线程为什么能支持高并发?
1.Nodejs是一个平台,构建在chrome的V8上(js语言解释器),采用事件驱动.非阻塞模型( c++库:libuv). 参考官方: Node.js is a platform built ...
- oracle中查询表中的触发器,关闭启用操作
1.查询指定表中有哪些触发器 select * from all_triggers WHERE table_name='表名' 2.禁用指定表中所有的触发器 alter table table_nam ...
- oc和swift对代码的分组,方便代码查找和导航用
OC中对代码的分组: 在OC中对代码分组的命令是#pragma mark 来实现的, 分组用的是: #pragma mark 分组名 添加分割线: #pragma mark - 如果想添加分割线的同时 ...
- C++ STL 之 list
#include <list> #include <iostream> using namespace std; // 打印list元素 void PrintList(list ...