微信小程序 倒计时
这两天在看微信小程序,参考了网上的资料,做了一个倒计时的练习,记录如下。
本文作者:罗兵
原地址:https://www.cnblogs.com/hhh5460/p/9981064.html
0、效果
1、视图
<!-- index.wxml --> <view class='datetimeTo'>距离:<text style='color:blue'>{{datetimeTo}}</text></view>
<view class='timeLeft'>还有:<text style='color:red'>{{timeLeft}}</text></view>
2、逻辑
//index.js const util = require('../../utils/util.js') Page({
data: {
datetimeTo: "2019/01/01 10:30:00 GMT+0800", // 秒杀开始时间
timeLeft: "" // 剩下的时间(天时分秒)
},
onShow: function () {
this.data.timer = setInterval(() =>{ //注意箭头函数!!
this.setData({
timeLeft: util.getTimeLeft(this.data.datetimeTo)//使用了util.getTimeLeft
});
if (this.data.timeLeft == "0天0时0分0秒") {
clearInterval(this.data.timer);
}
}, 1000);
}
});
3、工具
//util.js //取倒计时(天时分秒)
function getTimeLeft(datetimeTo){
// 计算目标与现在时间差(毫秒)
let time1 = new Date(datetimeTo).getTime();
let time2 = new Date().getTime();
let mss = time1 - time2; // 将时间差(毫秒)格式为:天时分秒
let days = parseInt(mss / (1000 * 60 * 60 * 24));
let hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
let seconds = parseInt((mss % (1000 * 60)) / 1000); return days + "天" + hours + "时" + minutes + "分" + seconds + "秒"
} module.exports = {
getTimeLeft: getTimeLeft
}
4、参考
微信小程序定时器:https://www.cnblogs.com/baqiphp/p/6145450.html
js毫秒化天时分秒:https://www.cnblogs.com/Byme/p/7844695.html
微信小程序 倒计时的更多相关文章
- 微信小程序倒计时组件开发
今天给大家带来微信小程序倒计时组件具体开发步骤: 先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段 ...
- 微信小程序——倒计时功能
做小程序项目中,需要做一个倒计时功能,如下图: 记录一下实现步骤: 1.考虑到这个功能可能会有多处用到,所以把倒计时的函数写在utils.js里面: const formatNumber = n =& ...
- 微信小程序倒计时
今天做程序要做个限时抢购的功能如图: 先上代码: 源码 index.wxml 可根据自己实际需求改改 <view class="div-content-warp"> ...
- 微信小程序倒计时实现
思路:跟一般js倒计时一样,主要在于this的变相传递. 实现效果: wxml文件部分代码: common.js文件 : 引用页JS文件: PS: 1.在data里初始化时间格式,是避免时间加载的第1 ...
- 微信小程序倒计时的方法
timeOut: function(time) { var that = this; var end = new Date(time).getTime(); var Interval = setInt ...
- 微信小程序倒计时实现功能
onLoad: function () { var that=this; this.data.intervarID= setInterval(function () { var ...
- 微信小程序源码推荐
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 微信小程序案例大全
微信小程序demo:足球,赛事分析 小程序简易导航 小程序demo:办公审批 小程序Demo:电魔方 小程序demo:借阅伴侣 微信小程序demo:投票 微信小程序demo:健康生活 小程序demo: ...
- 微信小程序学习指南
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
随机推荐
- Windows10+VS2017 用GLFW+GLAD 搭建OpenGL开发环境
本文参考:https://learnopengl-cn.github.io/ 一 下载GLFW(https://www.glfw.org/download.html) 和 GLAD(https:// ...
- Android--用JS去控制WebView显示的字体的大小
<script type="text/javascript"> function changeFontSize(size) { var tfs = '120%'; va ...
- Visual Studio Code配置Python环境
安装环境python环境变量,这个就不写了,这类文章一抓一大把,这类就省略了······· 在Visal Studil Code中配置python环境,其实跟我的上一篇文章一样,如图: 这里有两个选择 ...
- sqlserver sql优化案例及思路
始sql: SELECT TOP 100 PERCENT ZZ.CREW_NAME AS 机组, ZZ.CREW_ID, AA.年度时间, CC.当月时间, DD.连续七天时间 AS 最近七天 FRO ...
- 转-python异步IO-asyncio
原文连接 http://blog.chinaunix.net/uid-190176-id-4223282.html 前言 异步操作在计算机软硬件体系中是一个普遍概念,根源在于参与协作的各实体处理速度上 ...
- .Net Core Api 跨域配置
.Net Core 和Asp.Net 不同,不需要再去引用其他的跨域组件.创建项目时,就有了. 让接口实现跨域,需要配置两个地方. 一.Startup.cs 这里需要配置两个地方 public voi ...
- Eclipse 插件安装报错问题(已解决)
错误信息提示: An error occurred while installing the items session context was:(profile=epp.package.jee, p ...
- 为什么Github要把代码合并请求称为pull request而不是push request?
问题: 我的理解是:我做了一些修改,我请求把我的修改push到你的仓库,然后你review一下我的代码,如果没问题就接受请求merge,这样的话叫做push request岂不是更合适?因为这个操作是 ...
- php 两个二维数组重组新数组,数组下标不同
Array ( [0] => Array ( [PosNum] => 27025008 [start_time] => 20180328164929 [type] => 0 ) ...
- docker tomcat 已主机名为日志输出路径
目的:所有的日志输出到共享存储目录中 方法:将 tomcat 的日志放置到 /data/logs/主机名/ 下, 1. 修改tomcat/conf下的logging.properties [root ...