实现思路:

  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. Linux命令使用教程

    Linux 内核最初只是由芬兰人林纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux 的发行版说简单点就是将 Linux 内核与应用软件做一个打包. 目 ...

  2. Python实践项目2

    #南昌理工学院人工智能学院实验室WORKSHOP实践项目 import time import random SCRIPT_NPC_SCHOOL_SISTER = ['你好!', '你好!', '你是 ...

  3. Readme for Software engineering

    作业任务: 软件工程 软件工程 作业要求 作业要求 作业目标 博客园.github注册 自我介绍 软工5问 自我介绍: 广东工业大学计算机学院18级信息安全二班 广东工业大学AD攻防工作室成员& ...

  4. GaussDB(DWS)应用实战:对被视图引用的表进行DDL操作

    摘要:GaussDB(DWS)是从Postgres演进过来的,像Postgres一样,如果表被视图引用的话,特定场景下,部分DDL操作是不能直接执行的. 背景说明 GaussDB(DWS)是从Post ...

  5. Ubuntu下开启/关闭防火墙及端口

    有管理员权限可省略sudo. 1.查看端口开启状态 sudo ufw status 2.开启某个端口(以8866为例) sudo ufw allow 8866 3.开启防火墙 sudo ufw ena ...

  6. cmd运行SpringBoot的jar中文乱码

    问题: 通过以下命令启动springBoot项目后,在项目中查看日志,发现中文乱码 java -jar projectName.jar 解决 启动时添加参数-Dfile.encoding=UTF-8即 ...

  7. 【NOIP2013模拟】黑魔法师之门

    题目描述 经过了16个工作日的紧张忙碌,未来的人类终于收集到了足够的能源.然而在与Violet星球的战争中,由于Z副官的愚蠢,地球的领袖applepi被邪恶的黑魔法师Vani囚禁在了Violet星球. ...

  8. linux下锁定关键文件/etc/passwd、/etc/shadow、/etc/group、/etc/gshadow、/etc/inittab

    锁定/etc/passwd./etc/shadow./etc/group./etc/gshadow./etc/inittab,锁定关键的系统文件可以防止服务器提权后被篡改 1.对关键文件进行加锁,任何 ...

  9. Win10安装Tensorflow-gpu遇到Could not install packages due to an EnvironmentError: [WinError 5] 拒绝访问

    最近因为上课需要安装Anaconda和Tensorflow,安装Anaconda后再使用 Tensorflow官网提供的pip安装Tensorflow-GPU方法会出现如下错误: 解决方法:在安装命令 ...

  10. Python 开发GUI之UI界面的三种引入形式

    [纯手工代码] # -*- coding: utf-8 -*- # Author:Jack LEE # FileName:main # CreatedDate: 2020/9/17 # 手写代码的基础 ...