博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js实现天小时分钟秒倒计时
阅读量:6511 次
发布时间:2019-06-24

本文共 1822 字,大约阅读时间需要 6 分钟。

实现倒计时功能

直接上代码

// 计算时间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

你可能感兴趣的文章
spring-aop
查看>>
android RecycleView Adapter简单封装
查看>>
Dart的数据库操作
查看>>
Codeforces 591 B Rebranding【Codeforces Round #327 (Div. 2)】
查看>>
命名难,难于上青天
查看>>
APUE读书笔记-05标准输入输出库(7)
查看>>
23 第一周作业
查看>>
DNS解析偶尔延迟
查看>>
iOS打电话,发短信,发邮件,打开网址
查看>>
06-验证码-基本功能实现
查看>>
Java数据结构与算法(六) 希尔排序
查看>>
canvas学习笔记
查看>>
elasticsearch安装步骤
查看>>
PHP获取Cookie模拟登录CURL(转)
查看>>
PHP-权限控制类(转)
查看>>
CSS3秘笈第三版涵盖HTML5学习笔记9~12章
查看>>
bzoj1044木棍分割
查看>>
leetcode-136-Single Number
查看>>
微信小程序笔记<五> 页面管理及生命周期(route)——getCurrentPages()
查看>>
http服务器小项目
查看>>