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

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. 已管理员身份从cmd框进入mysql,及常用的简单操作!

    在命令框中操作mysql已管理员的身份进入操作权限较高,已普通用户进入cmd框也可对mysql进行操作,不过一般建议用管理员身份进入. 1.启动MYSQL Notifier 2.已管理员身份进入cmd ...

  2. linux 挂载共享文件夹

    1.背景 通常会有这样的场景,开发人员在Windows编写代码,然后放在linux环境编译,我们通过mount命令就可以实现将代码直接挂到linux环境上去,使Windows上的共享文件夹就像linu ...

  3. 前端性能优化 —— 添加Expires头与Cache-control区别

    要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件的当前副本, ...

  4. 从壹开始前后端 [vue后台] 之二 || 完美实现 JWT 滑动授权刷新

    缘起 哈喽大家周一好!不知道小伙伴们有没有学习呀,近来发现各种俱乐部搞起来了,啥时候群里小伙伴也搞一次分享会吧,好歹也是半千了(时间真快,还记得5个月前只有20多人),之前在上个公司,虽然也参与组织过 ...

  5. java代码之美(11)---java代码的优化

    java代码的优化 随着自己做开发时间的增长,越来越理解雷布斯说的: 敲代码要像写诗一样美.也能理解有一次面试官问我你对代码有洁癖吗? 一段好的代码会让人看就像诗一样,也像一个干净房间会让人看去很舒服 ...

  6. 8天入门docker系列 —— 第五天 使用aspnetcore小案例熟悉容器互联和docker-compose一键部署

    这一篇继续完善webnotebook,如果你读过上一篇的内容,你应该知道怎么去挂载webnotebook日志和容器的远程访问,但是这些还远不够,webnotebook 总要和一些数据库打交道吧,比如说 ...

  7. Spring Boot入门(一):使用IDEA创建Spring Boot项目并使用yaml配置文件

    由于公司最近在做技术转型(从.Net转Java),因此自己也开启了学习Java之路.学习Java怎么能不学习这几年这么火的Spring Boot框架,由于自己有总结的习惯,因此会把学习的过程以博客的形 ...

  8. nginx 隐藏版本号与WEB服务器信息

    nginx不仅可以隐藏版本信息,还支持自定义web服务器信息 先看看最终的隐藏结果吧 具体怎么实现呢,其实也很简单,请往下看 1 官网下载最新稳定版 wget http://nginx.org/dow ...

  9. Promise(避免金字塔回调)

    前后端分离开发,前端通过接口获取数据,但是有的页面不止一个接口,就会出现金字塔回调,可以通过 Promise 封装请求. request-data.js: function reqData(postu ...

  10. HTML 练习滑动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...