JavaScript倒计时效果
实现思路:
- 输入的时间减去现在的时间就是剩余的时间,但是不能拿着时分秒相减,比如05分减去25分,结果会是负的。
- 可以用时间戳来做,用户输入时间总的毫秒数减去现在时间的总的毫秒数,得到的就是剩余时间的毫秒数。
- 把剩余时间总的毫秒数转换为天、时、分、秒 (时间戳转换为时分秒)。
- 转换公式如下:
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倒计时效果的更多相关文章
- 二、JavaScript语言--JS实践--倒计时效果
主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...
- javascript特效实现(4)——当前时间和倒计时效果
这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...
- 超实用的JavaScript代码段 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
- 超实用的JavaScript代码段 Item1 --倒计时效果
现今团购网.电商网.门户网等,常使用时间记录重要的时刻,如时间显示.倒计时差.限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计 ...
- Javascript 实现倒计时效果
代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- Javascript之实现页面倒计时效果
本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...
- jQuery Countdown Timer 倒计时效果
这个一款简单的 jQuery 倒计时插件,用于显示剩余的天数,小时,分钟和秒.倒计时功能是非常有用的一个小功能,可以告诉用户多久以后您的网站将会发布或者关闭进行维护,还可以用于举办活动的开始和停止的倒 ...
- jquery网页倒计时效果,秒杀,限时抢购!
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- [jQuery编程挑战]006 生成一个倒计时效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
随机推荐
- 最小生成树MST
定义 在一给定的无向联通带权图\(G = (V, E, W)\)中,\((u, v)\) 代表连接顶点 \(u\) 与顶点 \(v\) 的边,而 \(w(u, v)\) 代表此边的权重,若存在 \(T ...
- 【极致丝滑】彻底摆脱编辑器插件,利用postcss灵活可控地转换px至vw
背景 旧的rem适配方案(无论是直接使用rem,还是配合flexiblejs等lib库进行视口缩放)已经疲态尽显,且随着安卓高清屏的不断出现,同时data-dpr仍有进一步增加的可能性,rem显得并不 ...
- 洛谷 P4072 [SDOI2016]征途 斜率优化DP
洛谷 P4072 [SDOI2016]征途 斜率优化DP 题目描述 \(Pine\) 开始了从 \(S\) 地到 \(T\) 地的征途. 从\(S\)地到\(T\)地的路可以划分成 \(n\) 段,相 ...
- PicGo软件搭配gitee实现图床
1.安装PicGo软件,并配置gitee 1.1安装picGo picGo 安装gitee-uploader 插件 官网下载地址如下:最新版本 可以自行选择版本进行下载,这里我选择了最新的版本进行下载 ...
- pycharm代码中批量粘贴内容的快捷键
windows电脑中,竖向批量复制的快捷键:Alt
- Robotframework自动化1-Windows环境搭建
前言: robotframework环境搭建-环境准备 1.python2,pip2 2.WxPython 3.Robot Framework 4.Robotframework-ride 5.RIDE ...
- [Java并发编程之美]第1章 线程基础 补充知识
1.2线程创建与运行 创建线程有三种方式: 继承Thread类并重写run方法: 实现Runnable接口的run方法,new Thread时将该类对象作为参数传入: 实现Callable接口的cal ...
- [Java核心技术]五-继承(枚举类)
####Java枚举类型(enum) 枚举类型都是继承了Enum类(是一个抽象类)的一个类,我们可以向enum类中添加方法和变量等.编译再反编译可以看到枚举类型对应的类的内容. 每个枚举常量都对应一个 ...
- [HDU2553]N皇后问题(DFS)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2553 题意 n<=10,输出N皇后问题的方法数. 题解 可以使用各种方法.这里使用DFS. 使用 ...
- [06] 优化C#服务器的思路和工具的使用
优化C#服务器的思路和工具的使用 优化服务器之前, 需要先对问题的规模做合理的预估, 然后对关键的数据做采样, 做对比, 看和自己的预估是否一致, 误差大在什么地方, 是预估的不对, 还是系统实现有问 ...