<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="show" style="text-align:center;font-size:18px;color:#fff;padding:10px 0;font-weight:bold">Loading...</div>
<script type="text/javascript">
function getLastTime(){
// 获取系统现在时间
var date = new Date();
// 获取今年年份
var year = date.getFullYear();
// 创建获取指定时间为：今年12月31日23时59分59秒，问：为什么不是24小时？因为小时在js中是从0开始算的0~23，分和秒也是一样从0~59
var endDate = new Date(year,12,31,23,59,59);
// 指定时间毫秒数 减去 现在时间毫秒数 得出 两个时间之间的毫秒差值
// 我们知道1000毫秒等于1秒，60秒等于1分钟，60分钟等于1个小时，24个小时等于1天，问：那怎么用毫秒差得出距离的天数或者小时、分钟呢？
/* 答： 拿天数比如以此类推：
1. 首先我们将毫秒数除于1000得出秒数，因为1000毫秒等于1秒
2. 得出时间差的秒数后，我们需要算出一天有多少秒？，我们知道一天有24个小时每个小时60分钟每分钟60秒，所以只需要24小时乘于60分钟得出1440分钟，然后1440分钟乘于60秒得出86400秒
3. 得出一天有86400秒后除于时间差的秒就得出距离指定日期还有多少天了
*/
var time = Math.floor((endDate.getTime() - date.getTime())/1000);
// 获取差值的天数
var day = Math.floor(time/(24*60*60));
// 获取差值的小时，时间差秒数取余数86400秒再除于一个小时3600秒得出相差小时，问:为什么取一天的秒的余数呢？？，
// 答：时间差的秒除于1天的秒数，我们取这个的余数相当于取了不够除于1天的秒数，也就是说还剩下多少秒就是还剩下多少小时，
// 因为如果足够除于一天的秒数那就是距离还有多少天了也就是天的数值了，而小时则是剩下的秒 除于 60分钟乘于60秒得出一个小时有3600秒然后再除于剩下的秒就变成多少小时了。
// 后面的分钟和秒数大家自已动手算吧。
// 注意：相同优先级运算符按从左到右的顺序计算
// 附上一份mdn的运算符优先级表：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
var hour = Math.floor(time%(24*60*60)/(60*60));
// 获取差值的分钟，简单来说就是取余的作用就是得出不够一天的秒数和不够一个小时的秒数后除于60秒得出分钟
var minute = Math.floor(time%(24*60*60)%(60*60)/60);
// 获取差值的秒数,简单来说就是取余的作用就是得出不够一天的秒数和不够一个小时的秒数和不够一分钟的秒
var second = Math.floor(time%(24*60*60)%(60*60)%60);
// 如果数值小于9则是一位数，则补0
day = day > 9 ? day : '0' + day;
hour = hour > 9 ? hour : '0' + hour;
minute = minute > 9 ? minute : '0' + minute;
second = second > 9 ? second : '0' + second;
// 获取显示元素将结果输出
document.getElementById("show").textContent = year +"年还剩"+day+"天"+hour+"时"+minute+"分"+second+"秒";
}
// 页面加载后，就调用一次，解决一秒后出现的问题
getLastTime();
// 设置1秒定时以刷新时间
setInterval(getLastTime,1000);
</script>
</body>
</html>
建议将以上代码复制到编辑器查看，更容易查看

js 计算当年还剩多少时间的倒数计时 javascript 原理解析【复制到编辑器查看推荐】的更多相关文章

  1. js 计算过去和未来的时间距离现在多少天？

    计算传入的任意一时间.计算出这个时间距离现在还有多少天!或者计算过去的时间距离现在已经过去了多少天! 返回值有两种! 1.负值 代表过去了多少天 2.正值 代表距离设定的时间还有多少天 说明:距离设定 ...

  2. 用JS计算预计时间与现在时间的差

    1.我用的是bootstrap网格布局,首先要引入bootstrap类. (1)<script src="jquery-1.11.2.min.js"></scri ...

  3. JS如何设置计算几天前的时间？

    计算多少天前的具体时间.比如今天是9月5日,那7天前正常就是8月29了. 之前曾经直接用时间进行加减,吃了大亏,后来脑残到直接写了一个很复杂的计算闰年,闰月,30.31.28的月份 现在分享一下. f ...

  4. js计算两个时间之间的间隔

    计算时间间隔的方法有很多,这里只是一种方式,可以方法里直接传入两个时间,也可以传入两个字符串格式的时间,在方法里解析一下就ok,这个例子里不传入参数,直接在方法里随便写一个时间来演示一下 fun() ...

  5. 网页倒计时，动态显示"××年还剩××天××时××分××秒"

    var target = document.getElementById('target'); function getTimeString(){ // 要计算任意两个日期的时间差只要修改curren ...

  6. 面试题之（js实现当年剩余时间倒计时程序）

    js实现当年剩余时间倒计时程序,请看代码: <script> function counter() { var date = new Date(); var year = date.get ...

  7. js 计算某年某周日期范围

    <HTML><HEAD><script type="text/javascript"> //目前只判断了4位有效输入的年份,//日期输出格式已处 ...

  8. js setInterval每隔一段时间执行一次

    js setInterval每隔一段时间执行一次setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval() 方法会不停地调用函数,直到 clearI ...

  9. js计算结果不精确问题解决--math.js的使用

    最近在做订单相关的一个功能,涉及到金额的计算,有人建议,将计算全部抛给后端来做吧,前端就不需要再维护一套算法了,话说的在理,但是呢,想想用户体验,单价*数量=金额,当用户改变一个数量时,用户都口算出来 ...

随机推荐

  1. springboot中，页面访问不到静态资源

    例一,静态资源放在默认的目录,如:resources/static或resources/templates 访问静态资源的时候,路径不应带上默认目录,因为springboot默认从这些目录下开始加载, ...

  2. docker 安装 mongodb

    1.docker search mongo 2.docker pull mongo 3.//docker run -d --name mymongo -p 27017:27017 -v /home/h ...

  3. Spring Security（三十七）：Part IV. Web Application Security

    Most Spring Security users will be using the framework in applications which make user of HTTP and t ...

  4. AI adanet

    adanet是一个基于Tensorflow的轻量级框架,只需要很少的专业干预,就可以自动学习出高质量的模型.在最近的AutoML成果上构建,既快速又灵活,还可以保证学习质量. adanet提供通用框架 ...

  5. 2018-2019-2 20175329许钰玮 实验二《Java面向对象程序设计》实验报告

    实验内容 1.初步掌握单元测试和TDD 2.理解并掌握面向对象三要素:封装.继承.多态 3.初步掌握UML建模 4.熟悉S.O.L.I.D原则 5.了解设计模式 (一)单元测试 对于单元测试中单元的含 ...

  6. Loadrunner学习资料

    辅导书籍(书的价值主要在学习的人,而不在书本身) 于涌 | 精通软件性能测试与LoadRunner实战京东 点击查看 柳胜 | 性能测试从零开始京东 点击查看适合零基础的同学学习 柳胜 | LoadR ...

  7. 好的LCT板子和一句话

    typedef long long ll; const int maxn = 400050; struct lct { int ch[maxn][2], fa[maxn], w[maxn]; bool ...

  8. vue axios封装以及登录token过期跳转问题

    Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...

  9. dubbo框架提供Main方法运行容器的几种方式（转）

      本文使用的是dubbo提供的主类com.alibaba.dubbo.container.Main启动容器. 主要区别是提供不同插件的的启动方式. 目录 一.项目内容  1.1.目录结构图  1.2 ...

  10. Navicat for MySQL 安装和破解

    1 下载 navicat_trial_11.1.20.0.1449226634.exe .PatchNavicat.exe 2 安装 navicat 3 打开 patchnavicat-选择 安装文件 ...