技术经验分享:javascript倒计数功能

简介: 技术经验分享:javascript倒计数功能

"

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

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) {

//代码效果参考:https://v.youku.com/v_show/id_XNjQwMDM2ODY4NA==.html

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(""倒计时时间格式错误"");

}

}

View Code

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

let //代码效果参考:https://v.youku.com/v_show/id_XNjQwNjgyNjQ0MA==.html

time = '05:00';

let timer = setInterval(() => {

time = timeRun(time, finished);

if(time == ""00:00"" || time == ""0:00:00""){

clearInterval(timer);

}

}, 1000);

View Code


"
image.png
相关文章
|
1天前
|
JavaScript vr&ar 数据库
技术笔记:Js获取当前日期时间及其它操作
技术笔记:Js获取当前日期时间及其它操作
|
1天前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
|
1天前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
|
1天前
|
JavaScript 前端开发
程序技术好文:第一百三十八节,JavaScript,封装库
程序技术好文:第一百三十八节,JavaScript,封装库
|
1天前
|
JavaScript
必知的技术知识:js保留二位小数
必知的技术知识:js保留二位小数
|
1天前
|
Web App开发 JavaScript iOS开发
技术笔记:js数组定义和方法(包含ES5新增数组方法)
技术笔记:js数组定义和方法(包含ES5新增数组方法)
|
1天前
|
Web App开发 JavaScript 前端开发
技术好文共享:非常好的一个JS代码(CJL.0.1.js)
技术好文共享:非常好的一个JS代码(CJL.0.1.js)
|
Web App开发 JavaScript 数据安全/隐私保护
|
Web App开发 JavaScript .NET
javascript客户端检测技术
原文:javascript客户端检测技术 javascript客户端检测技术  1. Firefox    Gecko是firefox的呈现引擎。当初的Gecko是作为通用Mozilla浏览器一部分开发的,而第一个采用Gecko引擎的浏览器是Netscape6; 我们可以使用用户代理检测下:如下JS代码: var ua = navigator.
1129 0
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
165 63