实现思路:

  1. 输入的时间减去现在的时间就是剩余的时间,但是不能拿着时分秒相减,比如05分减去25分,结果会是负的。
  2. 可以用时间戳来做,用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
  3. 把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)。
  4. 转换公式如下:
  d = parseInt(总秒数/60/60/24);     //   计算天数
h = parseInt(总秒数/60/60 %24) // 计算小时
m = parseInt(总秒数/60%60); // 计算分数
s = parseInt(总秒数%60); // 计算当前秒数

代码实现:

function countDown(time) {
var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数
var d = parseInt(times / 60 / 60 / 24); // 天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24); //时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60); // 分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60); // 当前的秒
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2020-10-9 00:00:00')); //设置的倒计时截止日期为2020年10月9日00点

输出结果:

02天03时08分44秒

JavaScript倒计时效果的更多相关文章

  1. 二、JavaScript语言--JS实践--倒计时效果

    主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...

  2. javascript特效实现(4)——当前时间和倒计时效果

    这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...

  3. 超实用的JavaScript代码段 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  4. 超实用的JavaScript代码段 Item1 --倒计时效果

    现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...

  5. Javascript 实现倒计时效果

    代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  6. Javascript之实现页面倒计时效果

    本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...

  7. jQuery Countdown Timer 倒计时效果

    这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...

  8. jquery网页倒计时效果,秒杀,限时抢购!

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. 用 Spring Boot 和 MybatisPlus 快速构建项目

    自动生成 public class MPGenerator { public static void main(String[] args) { AutoGenerator autoGenerator ...

  2. 题解 洛谷P3799 【妖梦拼木棒】

    一道水题 (还是做了一个小时,我太菜了 基本思路: 题里面说,4根棍子拼成一个正三角形(等边三角形) 若设这四根棍子长度为\(a,b,c,d\)且\(a≥b>c≥d\) 那很容易得到 (真的很容 ...

  3. 《Offer一箩筐》求职之前你必须知道的 4 件事!!

    「MoreThanJava」 宣扬的是 「学习,不止 CODE」. 如果觉得 「不错」 的朋友,欢迎 「关注 + 留言 + 分享」,文末有完整的获取链接,您的支持是我前进的最大的动力! Hi~ 这里是 ...

  4. 消息队列之-RocketMQ入门

    简介 RocketMQ是阿里开源的消息中间件,目前已经捐献个Apache基金会,它是由Java语言开发的,具备高吞吐量.高可用性.适合大规模分布式系统应用等特点,经历过双11的洗礼,实力不容小觑. 官 ...

  5. 非构造函数方式创建DbContext实例的方法

    using Microsoft.EntityFrameworkCore;using Microsoft.EntityFrameworkCore.Design;using Microsoft.Entit ...

  6. github学生认证——申请学生开发包

    写在前面 申请学生认证的好处: GitHub学生的免费AWS Educate入门帐户,价值100美元. 专业的桌面IDE:IntelliJ IDEA,PyCharm等.学生的免费订阅,每年更新一次. ...

  7. rabbitmq集成和实战

    与 Spring 集成 pom 文件 使用 Maven,这里使用的 4.3.11,所以这里引入的是 rabbit 是 2.0.0,如果兼容性的话请自行去 Spring 的官网上去查 这里补充一下,sp ...

  8. 并发编程中死锁、递归锁、进程/线程池、协程TCP服务器并发等知识点

    1.死锁 定义; 类似两个人分别被囚禁在两间房子里,A手上拿着的是B囚禁房间的钥匙,而B拿着A的钥匙,两个人都没法出去,没法给对方开锁,进而造成死锁现象.具体例子代码如下: # -*-coding:u ...

  9. 【Java并发编程】从CPU缓存模型到JMM来理解volatile关键字

    目录 并发编程三大特性 原子性 可见性 有序性 CPU缓存模型是什么 高速缓存为何出现? 缓存一致性问题 如何解决缓存不一致 JMM内存模型是什么 JMM的规定 Java对三大特性的保证 原子性 可见 ...

  10. 口罩预约管理系统——系统网站实现(前端+PHP+MySQL)

    口罩预约管理系统网站实现 一.前言 二.系统登陆逻辑及界面实现 三.用户模块 1.用户预约系统界面 2.用户查看我的订单界面 3.用户修改预约信息 四.管理员模块 1.管理员登陆界面 2.查看用户预约 ...