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

  1. export const timeRun = (timeStr, callBack) => {
  2. let timeArr = timeStr.split(':');
  3. if (timeArr.length == 2) {//格式 5:00
  4. let minute = timeArr[0];
  5. let second = timeArr[1];
  6. if (second == '00') {
  7. let minuteInt = parseInt(minute);
  8. minuteInt--;
  9. if (minuteInt.toString().length == 1) {
  10. minute = "0" + minuteInt;
  11. } else {
  12. minute = minuteInt.toString();
  13. }
  14. second = "59";
  15. } else {
  16. let secondInt = parseInt(second);
  17. secondInt--;
  18. if (secondInt.toString().length == 1) {
  19. second = "0" + secondInt;
  20. } else {
  21. second = secondInt.toString();
  22. }
  23. }
  24.  
  25. if ((minute == '00' || minute == '0') && (second == '00' || second == '0')) {
  26. callBack();
  27. return "00:00";
  28. }
  29.  
  30. return minute + ":" + second;
  31. } else if (timeArr.length == 3) {//格式 1:00:00
  32. let hour = timeArr[0];
  33. let minute = timeArr[1];
  34. let second = timeArr[2];
  35.  
  36. if (second == '00') {
  37. if (minute == '00') {
  38. let hourInt = parseInt(hour);
  39. hourInt--;
  40. minute = '59';
  41. hour = hourInt.toString();
  42. } else {
  43. let minuteInt = parseInt(minute);
  44. minuteInt--;
  45. if (minuteInt.toString().length == 1) {
  46. minute = "0" + minuteInt;
  47. } else {
  48. minute = minuteInt.toString();
  49. }
  50. second = "59";
  51. }
  52. } else {
  53. let secondInt = parseInt(second);
  54. secondInt--;
  55. second = second.toString();
  56. }
  57. if ((hour == '00' || hour == '0') && (minute == '00' || minute == '0') && (second == '00' || second == '0'))
  58.  
  59. return hour + ":" + minute + ":" + second;
  60. } else {
  61. console.error("倒计时时间格式错误");
  62. }
  63. }

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

  1. let time = '05:00';
  2. let timer = setInterval(() => {
  3. time = timeRun(time, finished);
  4. if(time == "00:00" || time == "0:00:00"){
  5. clearInterval(timer);
  6. }
  7. }, 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. Spring mvc 下载文件处理

    @RequestMapping(value = "downFile") public void downFile(HttpServletResponse response, Str ...

  2. eclipse 内存优化

    eclipse.ini配置如下: -Dfile.encoding=UTF-8-Xms512m-Xmx512m-Xmn170m-Xverify:none 注意-Xmn是-Xmx的三分之一关系 可以根据自 ...

  3. 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 ...

  4. Java 运算符 % 和 /

    / 是除运算符, %是取模运算符 区别: / 是普通的除法运算,如果除数和被除数都是整数,则商是取整 %是求余数 private static void test() { System. / ); S ...

  5. asp.net core系列 60 Ocelot 构建服务认证示例

    一.概述 在Ocelot中,为了保护下游api资源,用户访问时需要进行认证鉴权,这需要在Ocelot 网关中添加认证服务.添加认证后,ReRoutes路由会进行身份验证,并使用Ocelot的基于声明的 ...

  6. 我为什么放弃MySQL?最终选择了MongoDB

    最近有个项目的功能模块,为了处理方便,需要操作集合类型的数据以及其他原因.考虑再三最终决定放弃使用MySQL,而选择MongoDB. 两个数据库,大家应该都不陌生.他们最大的区别就是MySQL为关系型 ...

  7. Properties类对于文件的读取和写入

    Properties类表示一个持久的属性集.Properties可保存在流中或从流中加载.Properties对象只能加载以 .Properties 为后缀的文件(文件我创建在src下). 开始时文件 ...

  8. 【学习笔记Part 2● MySQL】

    数据库 为什么要用数据库 如何去存放数据?生活中有各种各样的数据.比如说人的姓名.年龄.成绩等.平时我们记录这些信息都是记在大脑中.人的记忆力有限,不可能什么都记住.所以后来人们把数据记录在石头上–& ...

  9. css基础系列

    盒子模型 盒子模型的概念 高和宽的设置 边框的设置 内边距的设置 外边距的设置 盒子的计算 元素显示的方式 盒子模型: border边框,margin外边距,padding内部距,content内容, ...

  10. 第一次上机,HTML静态网页的开发

    <html> <head> <title>第一次上级,cyy</title> </head> <body> <h3 ali ...