<!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. Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？

    原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...

  2. MySQL之库相关操作

    一 系统数据库 information_schema: 虚拟库,不占用磁盘空间,存储的是数据库启动后的一些参数,如用户表信息.列信息.权限信息.字符信息等performance_schema: MyS ...

  3. EF Core 遇到“可能会导致循环或多重级联路径”

    在ef core中你可能会设计这样一个实体: public class Customer : Entity,IMustHaveTenant, IHasCreationTime { public Cus ...

  4. Luogu P1852 BZOJ 2144 [国家集训队]跳跳棋

    qwq 这题一看就不会,如果不是gg让做我是坚决不会做的 画图模拟,因为一次只能跳过一个棋子,所以对于一种情况只有三种移动方式: 中间向左跳 中间向右跳 左或右(距中间近的那个)向中间跳 发现,除了跳 ...

  5. HNOI2019做题笔记

    代码比较长所以直接去LOJ看吧- 鱼(计算几何.向量) 比较套路的内容:枚举\(D\),对于其他所有点按照\(D\)极角排序,按照极角序枚举\(A\),这样垂直于\(AD\)的线也会以极角序旋转,可以 ...

  6. 玩转3D Swiper美女性感秀之思路分析总结

    前言 继一次的3D魔方之后,这次利用CSS3的transform.translate.rotate.preserve-3d等结合JS的requestAnimationFrame.class带你一起玩转 ...

  7. Windows 10 安装过程中，在自定义登录页面进入审核模式

    按ctrl-f3进入审核模式 https://msdn.microsoft.com/zh-cn/windows/hardware/commercialize/manufacture/desktop/b ...

  8. Kubernetes — 从0到1：搭建一个完整的Kubernetes集群

    准备工作 首先,准备机器.最直接的办法,自然是到公有云上申请几个虚拟机.当然,如果条件允许的话,拿几台本地的物理服务器来组集群是最好不过了.这些机器只要满足如下几个条件即可: 满足安装 Docker ...

  9. zookeeper报错java.net.ConnectException: Connection refused: no further information

    zookeeper报错java.net.ConnectException: Connection refused: no further information 这是在linux 启动 https:/ ...

  10. rsync 远程拷贝

    rsync -vzP win7.qcow2 agu@192.168.1.198:/tmp/