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) {
- 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 倒计数功能的更多相关文章
- web 页面上纯js实现按钮倒计数功能
需求构思:本功能想实现的是,一个按钮在页面载入就显示提醒续费,,,倒数60秒后,完成提醒功能,可以按另外一个页面跳转到主页. 参考网上的大神,实现如下:Button2倒数,Button3跳转,在页面上 ...
- web 页面上纯js实现按钮倒计数功能(实时计时器也可以)
需求构思:本功能想实现的是,一个按钮在页面载入就显示提醒续费,,,倒数60秒后,完成提醒功能,可以按另外一个页面跳转到主页. 参考网上的大神,实现如下:Button2倒数,Button3跳转,在页面上 ...
- 脉冲计数功能在ESM335x-Linux主板上的实现
1.综述 在工业控制中,经常需要获取脉冲信号计数值.频率.周期.占空比等参数.英创嵌入式主板ESM335X系列 Linux系统现已实现外部输入脉冲信号的计数.频率.周期.占空比测量功能. 主要功能及技 ...
- java并发编程_CountDownLanch(倒计数锁存器)应用场景
使用介绍: 一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 用给定的计数 初始化 CountDownLatch.由于调用了 countDown() 方法,所以在 ...
- javascript 自动填充功能
javascript 自动填充功能 javascript: (function(){ $("#zipcode").val("zip");$("#pho ...
- TF:Tensorflow定义变量+常量,实现输出计数功能—Jason niu
#TF:Tensorflow定义变量+常量,实现输出计数功能 import tensorflow as tf state = tf.Variable(0, name='Parameter_name_c ...
- javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决
javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...
- javascript 页面导出功能
javascript 页面导出功能 <a class="btn" href="javascript:void(0);" onclick="win ...
- JavaScript ES6 核心功能一览(转)
原文地址:Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+) 原文作者:Adrian Mejia 译文出自:掘金翻 ...
随机推荐
- Spring mvc 下载文件处理
@RequestMapping(value = "downFile") public void downFile(HttpServletResponse response, Str ...
- eclipse 内存优化
eclipse.ini配置如下: -Dfile.encoding=UTF-8-Xms512m-Xmx512m-Xmn170m-Xverify:none 注意-Xmn是-Xmx的三分之一关系 可以根据自 ...
- Appium 【已解决】提示报错:Attempt to re-install io.appium.android.ime without first uninstalling.
详细报错:Failed to install D:\AutoTest\appium\Appium\node_modules\appium\build\unicode_ime_apk\UnicodeIM ...
- Java 运算符 % 和 /
/ 是除运算符, %是取模运算符 区别: / 是普通的除法运算,如果除数和被除数都是整数,则商是取整 %是求余数 private static void test() { System. / ); S ...
- asp.net core系列 60 Ocelot 构建服务认证示例
一.概述 在Ocelot中,为了保护下游api资源,用户访问时需要进行认证鉴权,这需要在Ocelot 网关中添加认证服务.添加认证后,ReRoutes路由会进行身份验证,并使用Ocelot的基于声明的 ...
- 我为什么放弃MySQL?最终选择了MongoDB
最近有个项目的功能模块,为了处理方便,需要操作集合类型的数据以及其他原因.考虑再三最终决定放弃使用MySQL,而选择MongoDB. 两个数据库,大家应该都不陌生.他们最大的区别就是MySQL为关系型 ...
- Properties类对于文件的读取和写入
Properties类表示一个持久的属性集.Properties可保存在流中或从流中加载.Properties对象只能加载以 .Properties 为后缀的文件(文件我创建在src下). 开始时文件 ...
- 【学习笔记Part 2● MySQL】
数据库 为什么要用数据库 如何去存放数据?生活中有各种各样的数据.比如说人的姓名.年龄.成绩等.平时我们记录这些信息都是记在大脑中.人的记忆力有限,不可能什么都记住.所以后来人们把数据记录在石头上–& ...
- css基础系列
盒子模型 盒子模型的概念 高和宽的设置 边框的设置 内边距的设置 外边距的设置 盒子的计算 元素显示的方式 盒子模型: border边框,margin外边距,padding内部距,content内容, ...
- 第一次上机,HTML静态网页的开发
<html> <head> <title>第一次上级,cyy</title> </head> <body> <h3 ali ...