<!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. bsp总结

    就版本.nand nor. led三样本周,六六六 1. bsp坏块--- => nand bad Device 0 bad blocks:047600000600000007fe0000=&g ...

  2. k8s--如何使用Namespaces

    Namespaces 使用示例 Viewing namespaces Creating a new namespace Deleting a namespace Subdividing your cl ...

  3. 移动端解决单机事件延迟fastclick

    引入百度静态公共资源库 <script type='application/javascript' src='http://apps.bdimg.com/libs/fastclick/1.0.0 ...

  4. ElasticSearch（八）：elasticsearch.yml配置说明

    集群名称:cluster.name: my-application确保在不同的环境中的集群的名称不重复,否则,节点可能会连接到错误的集群上 节点名称:node.name: node-1默认情况下,当节 ...

  5. STM32 FSMC使用笔记

    最近在使用STM32的FSMC与FPGA做并行通信总线控制,做一下总结 1,利用FSMC读取写入16位数据时的封装函数如下,不这样使用的话在与FPGA进行通信的过程中可能会出现不可预知的错误. #de ...

  6. 详解Linux双网卡绑定之bond0

    1.什么是bond? 网卡bond是通过多张网卡绑定为一个逻辑网卡,实现本地网卡的冗余,带宽扩容和负载均衡,在生产场景中是一种常用的技术.Kernels 2.4.12及以后的版本均供bonding模块 ...

  7. leetcode 224. Basic Calculator 、227. Basic Calculator II

    这种题都要设置一个符号位的变量 224. Basic Calculator 设置数值和符号两个变量,遇到左括号将数值和符号加进栈中 class Solution { public: int calcu ...

  8. TensorRT&Sample&Python[introductory_parser_samples]

    本文是基于TensorRT 5.0.2基础上,关于其内部的introductory_parser_samples例子的分析和介绍. 1 引言 假设当前路径为: TensorRT-5.0.2.6/sam ...

  9. 使用.net core搭建文件服务器

    标题之所以带上.net core,而不是.net就是由于两者在类库的使用以及部署环境有很大的差别,所以特此说明. 长话短说,直接开始! 1.新建一个.net core项目,版本是2.0,为了方便就建一 ...

  10. mysql 导入出csv

    load data infile '/var/lib/mysql-files/ip_address.csv' into table ip_address fields terminated by ', ...