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

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. 自定义的Config节点及使用

    示例   下面的代码示例演示如何在创建自定义节时使用 ConfigurationProperty. C# VB   using System; using System.Configuration; ...

  2. 【实战小项目】python开发自动化运维工具--批量操作主机

    有很多开源自动化运维工具都很好用如ansible/salt stack等,完全不用重复造轮子.只不过,很多运维同学学习Python之后,苦于没小项目训练.本篇就演示用Python写一个批量操作主机的工 ...

  3. Linux中以单容器部署Nginx+ASP.NET Core

    引言 正如前文提到的,强烈推荐在生产环境中使用反向代理服务器转发请求到Kestrel Http服务器,本文将会实践将Nginx --->ASP.NET Core 部署架构容器化的过程.   Ng ...

  4. 原生js实现 五子棋

    先初始化棋盘 HTML: <!--棋盘--> <div class="grid"></div> CSS: /*棋盘*/ .grid{ posit ...

  5. 由dubbo服务禁用system.gc而引起的思考

    我一直都有一个疑问,丰巢业务服务的生产环境jvm参数设置是禁止system.gc的,也就是开启设置:-XX:+DisableExplicitGC,但是生产环境却从来没有出现过堆外内存溢出的情况.说明一 ...

  6. ORM之轻量级框架--Dapper

    一.什么是Dapper? Dapper是一款轻量级Orm框架,它是属于半自动的,它和Entity Framework和NHibernate不同,它只有一个单文件,没有很复杂的配置,如果你喜欢原生Sql ...

  7. Python 中@property的用法

    在绑定属性时,如果我们直接把属性赋值给对象,比如: p = Person() p.name= 'Mary' 我们先看个详细的例子(注意双下划线name和age定义为私有变量): class Perso ...

  8. Hibernate学习——API学习

    一.Configuration对象 解释:Hibernate的配置文件对象,是Hibernate启动加载的第一个对象,它会定位到映射文档的位置,读取配置文件,创建一个SessionFactory对象. ...

  9. MAC中使用APICloud同步代码错误解决办法

    在MAC上使用APICloud同步代码时出现错误,其实就是git位置的问题,简单点就是把路径映射下. 问题提示: Can't locate SVN/Core.pm in @INC (you may n ...

  10. git相关的操作

    给大家分享下git的使用心得,有不足的请大家补充: 克隆:git clone https://XXXXX 克隆指定分支:git clone -b https://XXXX 添加所有:git add . ...