<!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. web Deploy发布问题

    使用vs开发的时候,经常会发布项目.传统发布是登陆远程桌面.或ftp这些发布都有一定的麻烦.不能灵活的管理发布的文件.因此后来研究了web Deploy,研究之后发现是很不错的发布工具.这里把我使用w ...

  2. day 17-18 常用模块

    time:时间 '''时间戳(timestamp):time.time()延迟线程的运行:time.sleep(secs)(指定时间戳下的)当前时区时间:time.localtime([secs])( ...

  3. Java Scanner用法详解

    一.Scanner类简介 Java 5添加了java.util.Scanner类,这是一个用于扫描输入文本的新的实用程序.它是以前的StringTokenizer和Matcher类之间的某种结合.由于 ...

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

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

  5. 六招轻松搞定你的CentOS系统安全加固

    Redhat是目前企业中用的最多的一类Linux,而目前针对Redhat攻击的黑客也越来越多了.我们要如何为这类服务器做好安全加固工作呢?  一.  账户安全 1.1 锁定系统中多余的自建帐号 检查方 ...

  6. Git—推送代码至Github

    Git—上传代码至Github 首先得有个Github的账户,然后创建一个库. 然后找到指向改库的URL 第一次上传需要设置用户邮箱,打开git安装文件/bin下面找到git.bash并打开,设置全局 ...

  7. python批量修改linux主机密码

    +++++++++++++++++++++++++++++++++++++++++++标题:python批量修改Linux服务器密码时间:2019年2月24日内容:基于python实现批量修改linu ...

  8. python基础概念（转）

    基础回顾: 1.集合 集合有2个重要作用:关系测试(并集,差集,交集)和去重. 2.文件编码 2.7上默认文件编码是ASCII码,因为不支持中文,就出了GB2312,在2.7上要支持中文就必须申明文件 ...

  9. JMeter二次开发(1)-eclipse环境配置及源码编译

    1.下载src并解压 http://jmeter.apache.org/download_jmeter.cgi   2.获取所需jar包,编译 ant download_jars ant instal ...

  10. springmvc解决中文乱码问题

    1 第一种情况(get接收参数): 最近在用solr做一个搜索服务,发布给手机和pc等客户端调用,调用方式为:   http://www.ganbo.search/search?q="手机& ...