<!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. Java Scala 混合编程导致 编译失败 ，【找不到符号】问题解决

    大致就是 工程里分了 java 代码 和 scala 代码. 然后在java代码中 引用了 scala 的代码. 运行不报错. 但是打包就是一直报错. [ERROR] Failed to execut ...

  2. 记一个bug

    就在刚刚,测试叫我去看一个问题,有用户反应,在业务页面,出现了一部分重复的内容,而且点击按钮弹窗里,出现了只有个title,没有body的情况. 事情的现象就是这样.然后我就开始着手找原因了.首先声明 ...

  3. Redhat7.3更换CentOS7 yum源

    Redhat yum源是收费的,没有注册的Redhat机器是不能使用yum源的. 1.当前系统环境: 系统版本:Red Hat Enterprise Linux Server release 7.3 ...

  4. 文本分类实战（三）—— charCNN模型

    1 大纲概述 文本分类这个系列将会有十篇左右,包括基于word2vec预训练的文本分类,与及基于最新的预训练模型(ELMo,BERT等)的文本分类.总共有以下系列: word2vec预训练词向量 te ...

  5. winserver的consul部署实践与.net core客户端使用（附demo源码）

    winserver的consul部署实践与.net core客户端使用(附demo源码)   前言 随着微服务兴起,服务的管理显得极其重要.都知道微服务就是”拆“,把臃肿的单块应用,拆分成多个轻量级的 ...

  6. Linux下Power Management开发总结

    本文作为一个提纲挈领的介绍性文档,后面会以此展开,逐渐丰富. 1. 前言 在 <开发流程>中介绍了PM开发的一般流程,重点是好的模型.简单有效的接口参数.可量化的测试环境以及可独性强的输出 ...

  7. [Spark][Streaming]Spark读取网络输入的例子

    Spark读取网络输入的例子: 参考如下的URL进行试验 https://stackoverflow.com/questions/46739081/how-to-get-record-in-strin ...

  8. aelf帮助C#工程师10分钟零门槛搭建DAPP&私有链开发环境

    aelf是一个可扩展的去中心化云计算区块链平台,支持高性能合约并行执行.原生多链数据交互.存储使用高性能分布式数据库. aelf整个系统可以在windows.osx及linux运行,团队在osx环境下 ...

  9. Java 创建一个简单的验证码图片

    代码如下: package lixin.gan.test; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2 ...

  10. 【学习总结】Git学习-本地仓库覆盖式更新对于Git仓库的影响以及pull/push到GitHub

    < 许久不用Git之后的探索 > 准备日常更新自己的GitHub了.但是编写的文件平时不放在Git仓库路径下. 故测试覆盖式更新对于仓库是否有影响 直接说结论: 通过对已有库的测试发现覆盖 ...