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

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. Ubuntu18.04美化主题(mac主题)

    前端时间Ubuntu18.04LTS发布,碰巧之前用的Ubuntu16.04出了一点问题,懒得解决,索性就换了Ubuntu18.04. 成果: 参考博客:https://www.cnblogs.com ...

  2. CART决策树和随机森林

    CART 分裂规则 将现有节点的数据分裂成两个子集,计算每个子集的gini index 子集的Gini index: \(gini_{child}=\sum_{i=1}^K p_{ti} \sum_{ ...

  3. 论JVM爆炸的几种姿势及自救方法

    前言 如今不管是在面试还是在我们的工作中,OOM总是不断的出现在我们的视野中,所以我们有必要去了解一下导致OOM的原因以及一些基本的调整方法,大家可以通过下面的事例来了解一下什么样的代码会导致OOM, ...

  4. centos 修改hostname

    centos修改主机名的正确方法 1 centos6下修改hostname [root@centos6 ~]$ hostname # 查看当前的hostnmae centos6.magedu.com ...

  5. CSharpGL(50)使用Assimp加载骨骼动画

    CSharpGL(50)使用Assimp加载骨骼动画 在(http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html)介绍了C++用Asism ...

  6. 【学习笔记Part 1 ● Linux】

    本章目标 Linux简介 Linux发展 Linux界面熟悉 Linux常用命令 Linux简介 经常看到的或者熟悉的操作系统: Windows操作系统:Window 10或者Window 7 Mac ...

  7. ArcGIS API for JavaScript 4.9 & 3.26 发布与新特性

    应该是中文首发?我只想说:更新太TMD快了 QAQ Part I -- JsAPI 4.9 主题1:在2D中默认启用WebGL渲染 在要素图层.CSV图层.流图层中是使用WebGL渲染的,这个任务由M ...

  8. SSIS-导入Excel文件时记录行号

    SSIS导入Excel时记录行号 1. "Excel源"后添加"脚本组件" 2. "脚本组件"中新增输出列,命名为"RowNumb ...

  9. 【原】无脑操作:Centos 7后台运行及终止jar包程序

    1.后台运行jar包程序,输入:nohup java -jar /路径/程序.jar & 2.后台终止jar包程序,输入:ps -ef | grep java,查看使用java命令的进程,再输 ...

  10. 如何设置织梦cms自定义表单字段为必填项

    1.编辑器打开\plus\diy.php2.在40行左右找到此行代码:$dede_fields = empty($dede_fields) ? '' : trim($dede_fields);3.在这 ...