案例-做一个30分钟倒计时

今天在做支付宝小程序的一个功能时，面对这样一个需求，有一个订单，对于未付款的订单需要做一个30分钟的倒计时功能，提醒用户还有多少秒支付时间，格式为29:59。
其他的细节就不详细介绍了，下面着重介绍一下计时器功能怎么做，以及优化。

例如我现在的时间是"2018-12-20 09:22:00", 我需要计算"2018-12-20 09:20:00"这个目标时间的倒计时。

首先在公共JS中定义一个timer方法，这个方法需要一个参数，即目标时间。
这个参数格式必须符合日期格式，可以是时间戳，也可以是标准时间。

function timer(val) {var nowTime = new Date();var createdTime = new Date(val);var TIME = 1000 * 60 * 30;// 目标时间和当前时间的毫秒数var differ = nowTime - createdTime;// 目标时间超过当前时间，或目标时间与当前时间的差超过30分钟则返回0if (differ < 0 || differ > TIME) {return 0;};// 剩余时间的秒数differ = TIME - differ;// 计算分钟数var minute = Math.floor(differ / (60 * 1000));minute = minute < 10 ? '0' + minute : minute;// 计算秒数var second = Math.floor((differ - minute * (60 * 1000)) / 1000);second = second < 10 ? '0' + second : second;// 返回结果格式 29:59return minute + ':' + second;
}// 调用方法
var time = timer("2018-12-20 09:20:00"); // 28:00

接下来我们优化一下，30秒固定死了，我想灵活一点。

那就再传入一个参数！

function timer(val, timeInterval) {var nowTime = new Date();var createdTime = new Date(val);var TIME = 1000 * 60 * timeInterval;// 目标时间和当前时间的毫秒数var differ = nowTime - createdTime;// 目标时间超过当前时间，或目标时间与当前时间的差超过30分钟则返回0if (differ < 0 || differ > TIME) {return 0;};// 剩余时间的秒数differ = TIME - differ;// 计算分钟数var minute = Math.floor(differ / (60 * 1000));minute = minute < 10 ? '0' + minute : minute;// 计算秒数var second = Math.floor((differ - minute * (60 * 1000)) / 1000);second = second < 10 ? '0' + second : second;// 返回结果格式 29:59return minute + ':' + second;
}// 调用方法
var time1 = timer("2018-12-20 09:20:00", 30); // 我需要做30分钟的倒计时
console.log(time1); // 28:00
var time2 = timer("2018-12-20 09:20:00", 60);
console.log(time2); // 58:00

如果想扩展成其他的，比如扩展"01:59:59"格式，可以从这个案例中进行修改。

案例-做一个30分钟倒计时相关推荐

微信小程序多个商品 30分钟倒计时
商品30分钟倒计时, //30分钟倒计时Page({/*** 页面的初始数据*/data: {order: [{_id: 'wersdfsdfe89',status: 'unpay',//未支付状态p ...
js 30分钟倒计时
<html><head><meta charset="UTF-8"><title></title></head&g ...
ppt倒计时_年终会议做一个这样的倒计时PPT，保证惊艳全场！1分钟就能学会
倒计时动画很经常被用在一些产品的发布会或是新年晚会的现场,因为倒计时可以营造除以中紧张的氛围~那么我们常见的倒计时动画都是怎么做出来的呢?其实一点也不难,不需要任何专业的视频软件,只要用我们日常工作中 ...
案例-做一个酒店预定小程序用的日期选择案例
今天给大家分享一个酒店预定小程序用的日期选择案例,我是做的支付宝小程序,如果需要应用到微信小程序,请将相关字眼改成微信用的字眼,比如onTap改bindtap,a:if或者a:for改成wx:if和w ...
jquery 做一个小的倒计时效果
html <div id="shop_rec"><ul class="cf"><li><img src="i ...
uni-app 的30分钟倒计时
<template><view><button @click="countdown(1800000 - 1)">开始倒计时</button ...
如何设置一个严格30分钟过期的Session
今天在我的微博(Laruence)上发出一个问题: 我在面试的时候, 经常会问一个问题: "如何设置一个30分钟过期的Session?", 大家不要觉得看似简单, 这里面包含的知识 ...
PHP中设置一个严格30分钟过期Session面试题的4种答案
今天在我的微博上发出一个问题: 我在面试的时候, 经常会问一个问题: "如何设置一个30分钟过期的Session?", 大家不要觉得看似简单, 这里面包含的知识挺多, 特别适合考察 ...
Redis key过期事件监听实现 - 30分钟自动取消未支付订单
目录一.前言二.实现方案分析三.Redis key过期事件方案实现步骤 3.1 Redis 安装步骤详见 3.2 修改 Redis 配置 3.3 在获取支付链接视图中设置key过期事件 3.4 ...
30分钟！用Django做一个迷你的Todolist！上篇！
"菜鸟学Python",第"515"篇原创 Python语法简单,功能强大,深受很多同学的喜爱.菜鸟哥以前给大家分享了很多趣味的案例,有基础的语法,趣味的神器库 ...

案例-做一个30分钟倒计时

案例-做一个30分钟倒计时相关推荐

最新文章

热门文章