最近在项目中遇到一个倒计时功能,在网上没有找到合适的,就自己写了个方法。贴在这里,权且当个记录。

export const timeRun = (timeStr, callBack) => {
let timeArr = timeStr.split(':');
if (timeArr.length == 2) {//格式 5:00
let minute = timeArr[0];
let second = timeArr[1];
if (second == '00') {
let minuteInt = parseInt(minute);
minuteInt--;
if (minuteInt.toString().length == 1) {
minute = "0" + minuteInt;
} else {
minute = minuteInt.toString();
}
second = "59";
} else {
let secondInt = parseInt(second);
secondInt--;
if (secondInt.toString().length == 1) {
second = "0" + secondInt;
} else {
second = secondInt.toString();
}
} if ((minute == '00' || minute == '0') && (second == '00' || second == '0')) {
callBack();
return "00:00";
} return minute + ":" + second;
} else if (timeArr.length == 3) {//格式 1:00:00
let hour = timeArr[0];
let minute = timeArr[1];
let second = timeArr[2]; if (second == '00') {
if (minute == '00') {
let hourInt = parseInt(hour);
hourInt--;
minute = '59';
hour = hourInt.toString();
} else {
let minuteInt = parseInt(minute);
minuteInt--;
if (minuteInt.toString().length == 1) {
minute = "0" + minuteInt;
} else {
minute = minuteInt.toString();
}
second = "59";
}
} else {
let secondInt = parseInt(second);
secondInt--;
second = second.toString();
}
if ((hour == '00' || hour == '0') && (minute == '00' || minute == '0') && (second == '00' || second == '0')) return hour + ":" + minute + ":" + second;
} else {
console.error("倒计时时间格式错误");
}
}

使用方法如下,其中finished是回调函数:

let time = '05:00';
let timer = setInterval(() => {
time = timeRun(time, finished);
if(time == "00:00" || time == "0:00:00"){
clearInterval(timer);
}
}, 1000);

javascript 倒计数功能的更多相关文章

  1. web 页面上纯js实现按钮倒计数功能

    需求构思:本功能想实现的是,一个按钮在页面载入就显示提醒续费,,,倒数60秒后,完成提醒功能,可以按另外一个页面跳转到主页. 参考网上的大神,实现如下:Button2倒数,Button3跳转,在页面上 ...

  2. web 页面上纯js实现按钮倒计数功能(实时计时器也可以)

    需求构思:本功能想实现的是,一个按钮在页面载入就显示提醒续费,,,倒数60秒后,完成提醒功能,可以按另外一个页面跳转到主页. 参考网上的大神,实现如下:Button2倒数,Button3跳转,在页面上 ...

  3. 脉冲计数功能在ESM335x-Linux主板上的实现

    1.综述 在工业控制中,经常需要获取脉冲信号计数值.频率.周期.占空比等参数.英创嵌入式主板ESM335X系列 Linux系统现已实现外部输入脉冲信号的计数.频率.周期.占空比测量功能. 主要功能及技 ...

  4. java并发编程_CountDownLanch(倒计数锁存器)应用场景

    使用介绍: 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDown() 方法,所以在 ...

  5. javascript 自动填充功能

    javascript 自动填充功能 javascript: (function(){ $("#zipcode").val("zip");$("#pho ...

  6. TF:Tensorflow定义变量+常量,实现输出计数功能—Jason niu

    #TF:Tensorflow定义变量+常量,实现输出计数功能 import tensorflow as tf state = tf.Variable(0, name='Parameter_name_c ...

  7. javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...

  8. javascript 页面导出功能

    javascript 页面导出功能 <a class="btn" href="javascript:void(0);" onclick="win ...

  9. JavaScript ES6 核心功能一览(转)

    原文地址:Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+) 原文作者:Adrian Mejia 译文出自:掘金翻 ...

随机推荐

  1. nginx+php安装

    1.环境概述 虚拟机系统:CentOS Linux release 7.3.1611 (Core) 宿主机系统:Mac Sierra version 10.12.3 nginx:1.10.3 php: ...

  2. jackson json转对象 json转集合 对大小写支持

    @JsonAutoDetect(fieldVisibility = Visibility.ANY, getterVisibility = Visibility.NONE, isGetterVisibi ...

  3. TiDB show processlist命令源码分析

    背景 因为丰巢自去年年底开始在推送平台上尝试了TiDB,最近又要将承接丰巢所有交易的支付平台切到TiDB上.我本人一直没有抽出时间对TiDB的源码进行学习,最近准备开始一系列的学习和分享.由于我本人没 ...

  4. surging如何使用swagger 组件测试业务模块

    1.前言 微服务架构概念的提出已经有非常长一段时间了,但在近期几年却开始频繁地出现,大家都着手升级成微服务架构,使用着各种技术,大家认为框架有服务治理就是微服务,实现单一协议的服务调用,微服务虽然没有 ...

  5. 深入学习Redis(3):主从复制

    前言 在前面的两篇文章中,分别介绍了Redis的内存模型和Redis的持久化. 在Redis的持久化中曾提到,Redis高可用的方案包括持久化.主从复制(及读写分离).哨兵和集群.其中持久化侧重解决的 ...

  6. SpringBoot之旅第二篇-配置

    一.引言 虽然springboot帮我们进行了自动配置,但配置还是不可避免的,比如最简单的端口号,数据库连接.但springboot的配置一般不用xml进行配置,而是yml和properties,选择 ...

  7. Jenkins之Log Parse的使用

    在初学使用Jenkins的同学们,应该都遇到过通过bash或者cmd命令执行输出的日志,没办法做到对error, warning等状态的分析和统计.在这里就给他介绍一款实现此功能的插件Log Pars ...

  8. RabbitMq在CentOs7下的完整安装步骤,带你踩坑

    1.前言 因为公司项目中用的RabbitMq来做消息处理,自己以前没有接触过,所以想自学一下.然额,光安装就花了6.7个小时才搞定,中间还换过一个版本,综合国内外博客才最终将所有安装中遇到的问题解决掉 ...

  9. 微信小程序之滑动日历展示

    滑动日历效果 效果预览 实现要求:顶部固定悬浮的是获取未来一周的日期,分为上下两部分,上面部分显示星期,下面则显示具体日期.今天则显示今天,可点击头部具体日期,可向左向右滑动. 实现代码 顶部日历 页 ...

  10. 学习 JavaScript (四)核心概念:操作符

    JavaScript 的核心概念主要由语法.变量.数据类型.操作符.语句.函数组成,前面三个上一篇文章已经讲解完了.后面三个内容超级多,这篇文章主要讲解的是操作符. 操作符 什么叫做操作符? 这是一种 ...