当前位置: 首页 > news >正文

js实现天小时分钟秒倒计时

实现倒计时功能

直接上代码

// 计算时间
countDown: function (time) {
  var date2
  var date1
  var self = this
  window.requestAnimationFrame(step)
  function step() {
    date1 = new Date().getTime(); //开始时间
    if (date2 == undefined) {
      date2 = new Date().getTime() + time; //结束时间
    }

    var date3 = date2 - date1; //时间差的毫秒数      
    //计算出相差天数
    var days = Math.floor(date3 / (24 * 3600 * 1000))
    //计算出小时数
    var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
    var hours = self.zeroFill(Math.floor(leave1 / (3600 * 1000)))
    //计算相差分钟数
    var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
    var minutes = self.zeroFill(Math.floor(leave2 / (60 * 1000)))
    //计算相差秒数
    var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
    var seconds = self.zeroFill(Math.round(leave3 / 1000))
    let temptime = self.time = days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"
    if (temptime == '1天00小时00分钟00秒') {
      self.time = '24小时00分钟00秒'
    } else {
      self.time = temptime.substring(temptime.length - 11, temptime.length)
    }
    if (self.time.substring(9, 10) == 0 && self.time.substring(8, 9) == 6) {
      self.timeObj.sOne = 9
      self.timeObj.sTwo = 5
    } else {
      self.timeObj.sOne = self.time.substring(9, 10)
      self.timeObj.sTwo = self.time.substring(8, 9)
    }
    self.timeObj.mOne = self.time.substring(5, 6)
    self.timeObj.mTwo = self.time.substring(4, 5)
    self.timeObj.hOne = self.time.substring(1, 2)
    self.timeObj.hTwo = self.time.substring(0, 1)
    if (self.time == '00小时00分钟00秒') {
      console.log('时间到')
      return
    } else {
      window.requestAnimationFrame(step)
    }
  }
},
zeroFill: function (num) {
  num = '' + num
  if (num.length == 1) {
    num = '0' + num
  }
  return num
},

运行时调用函数,参数传倒计时的毫秒数

  this.countDown(86400000) //时间初始化
复制代码

写的比较草率,有问题联系我。

转载于:https://juejin.im/post/5d0b1ff4e51d45595319e34c

相关文章:

  • Mahout 中基于SVD 的协同过滤原理
  • 抽屉原理
  • Flexigrid自定义显示数据列
  • parseInt()
  • SQL SERVER 2000数据库置疑处理
  • 从零开始--系统深入学习android(实践-让我们开始写代码-Android框架学习-4.Action Bar)...
  • [C#]手把手教你打造Socket的TCP通讯连接(一)
  • vue组件之间的传值
  • 『Python基础』第二节: Python简介及入门
  • 统一ID服务
  • 小小c#算法题 - 5 - 插入排序
  • 线程启动 [转]
  • PSP Skype 使用国内卡
  • php.ini 中文版[转]
  • 使用StyleCop进行代码审查
  • 收藏网友的 源程序下载网
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • 【个人向】《HTTP图解》阅后小结
  • 【刷算法】求1+2+3+...+n
  • export和import的用法总结
  • JavaScript的使用你知道几种?(上)
  • Java多态
  • Java教程_软件开发基础
  • tensorflow学习笔记3——MNIST应用篇
  • 从0到1:PostCSS 插件开发最佳实践
  • 从零开始的无人驾驶 1
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 基于Mobx的多页面小程序的全局共享状态管理实践
  • 跨域
  • 理清楚Vue的结构
  • 两列自适应布局方案整理
  • 使用agvtool更改app version/build
  • 阿里云ACE认证之理解CDN技术
  • #我与Java虚拟机的故事#连载06:收获颇多的经典之作
  • (27)4.8 习题课
  • (7)STL算法之交换赋值
  • (Redis使用系列) Springboot 在redis中使用BloomFilter布隆过滤器机制 六
  • (八)五种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (笔试题)合法字符串
  • (独孤九剑)--文件系统
  • (二)c52学习之旅-简单了解单片机
  • (附源码)ssm基于微信小程序的疫苗管理系统 毕业设计 092354
  • (十七)devops持续集成开发——使用jenkins流水线pipeline方式发布一个微服务项目
  • (太强大了) - Linux 性能监控、测试、优化工具
  • (原創) 如何動態建立二維陣列(多維陣列)? (.NET) (C#)
  • (转)eclipse内存溢出设置 -Xms212m -Xmx804m -XX:PermSize=250M -XX:MaxPermSize=356m
  • (转)es进行聚合操作时提示Fielddata is disabled on text fields by default
  • .\OBJ\test1.axf: Error: L6230W: Ignoring --entry command. Cannot find argumen 'Reset_Handler'
  • .describe() python_Python-Win32com-Excel
  • .net core Swagger 过滤部分Api
  • .NET Standard 的管理策略
  • .NET 除了用 Task 之外,如何自己写一个可以 await 的对象?
  • .NET 应用架构指导 V2 学习笔记(一) 软件架构的关键原则
  • .NET/C# 获取一个正在运行的进程的命令行参数
  • .NET下ASPX编程的几个小问题