倒计时很常见,例如离XX活动还有XX天XX小时XX分XX秒,然后逐秒减少,实现很简单,我只是想记录这过程中的一点小坑。

先上代码:

<html>
<head>
<meta charset="UTF-8" >
<title>task0002_2</title>
</head>
<body>
<input id="input-date" type="text" />
<button id="btn">点击</button>
<p>
距离<span id="show-date">YYYY年MM月DD日</span>还有<span id="time-different">XX天XX小时XX分XX秒</span>
</p> <script src="./js/util.js"></script>
<script src="./js/task0002_2.js"></script>
</body>
</html>

在按照xxxx-xx-xx这样的格式输入之后,点击按钮,下面就开始倒计时。

实现思路很简单:按照输入的时间转换成Date,然后获取现在的时间,两个时间相减,再转换成以天/时/分/秒为单位的就好了。

现在看看我的JS代码,我没有做格式错误的判断,默认输入的时间格式是正确的。

addEvent($("#btn"), "click", displayTime);  // addEvent是我自己封装的函数,其实就是元素的事件绑定

function displayTime() {
var $inputDate = $("#input-date").value; // 获取日期字符串
var date = new Date(Date.parse($inputDate)); // 用日期字符串构造Date
date.setHours(0);
date.setMinutes(0);
date.setSeconds(0);
console.log(date.toString());
var str = date.getFullYear().toString() + "年" + (date.getMonth()+1).toString() + "月" + date.getDate().toString() + "日";
$("#show-date").innerHTML = str;
display(date);
} // 倒计时
function display(date) {
var nowDate = new Date();
console.log(nowDate.toString());
var diffTime = date.getTime() - nowDate.getTime(); // 相减后单位是毫秒
var remain = diffTime % parseInt(1000 * 3600 * 24); // 1000 * 3600 * 24, 因为单位是毫秒,这就是1天的毫秒数了,不需要自己算,列个公式出来就好,取余的意思就是剩下的毫秒数不够一天,继续算还剩多少小时,下面以此类推
var diffDate = Math.floor(diffTime / (1000 * 3600 * 24)); // 还剩多少天 var diffHour = Math.floor(remain / (1000 * 3600));
remain = remain % (1000 * 3600); var diffMinute = Math.floor(remain / (1000 * 60));
remain = remain % (1000 * 60); var diffSecond = Math.floor(remain / (1000));
var str = diffDate + "天" + diffHour + "时" + diffMinute + "分" + diffSecond + "秒";
$("#time-different").innerHTML = str; // 如果不够1秒就继续倒数,否则停止
if (remain > 1000) {
setTimeout(display, 1000, date);
}
}

上面代码基本上很好懂的,下面说一下要注意的地方:

1.parse() 返回的是1970年1月1日午夜到指定日期(字符串)的毫秒数。我上面的默认是到指定日期的00:00的倒计时,所以构造了Data要setHours(),否则默认是的8点

2.JavaScript中除法的结果默认是浮点数,就是我console.log(2/3);出来的结果是0.66666666,需要使用Math.floor向下取整

3.setTimeout要带参数,注意不要直接setTimeout(display(date), 1000);这样写,setTimeout详见JavaScript学习之setTimeout

4.getFullYear() 从 Date 对象以四位数字返回年份,所以最好就不要用getYear()。getMonth() 从 Date 对象返回月份是(0 ~ 11),所以记得加一。

JavaScript学习之 倒计时的更多相关文章

  1. JavaScript学习(一) —— 环境搭建与JavaScript初探

    1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...

  2. Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”

    Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...

  3. JavaScript学习(3):函数式编程

    在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...

  4. JavaScript学习(2):对象、集合以及错误处理

    在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...

  5. JavaScript学习13 JavaScript中的继承

    JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...

  6. JavaScript学习12 JS中定义对象的几种方式

    JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...

  7. JavaScript学习11 数组排序实例

    JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...

  8. JavaScript学习10 JS数据类型、强制类型转换和对象属性

    JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...

  9. JavaScript学习09 函数本质及Function对象深入探索

    JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...

随机推荐

  1. java基础之异常。

    异常: (1)异常:异常就是Java程序在运行过程中出现的错误. 异常由来:问题也是现实生活中一个具体事务,也可以通过java 的类的形式进行描述,并封装成对象.其实就是Java对不正常情况进行描述后 ...

  2. ssh实现免密码登录和文件传输

    一般的用户名密码认证不安全,很容易被暴力破解,还不方便:而大多数人都是选择使用 SSH 密钥认证,不仅安全还不用每次输密码 ssh密钥对 # 使用 ssh-keygen 生成非对称密钥,一路回车即可 ...

  3. odoo web controller

    Routing openerp.http.route(route=None, **kw) Decorator marking the decorated method as being a handl ...

  4. TCP/TP:DNS区域(Zone)

    之前阅读资料不是特别明白,看到一个博主的解释,豁然开朗,特此记录. https://blog.csdn.net/huangzx3/article/details/79347556 DNS区域(ZONE ...

  5. (5)连续非周期信号的傅里叶变换(频谱) & 周期信号的傅里叶变换

    参考资料:<信号与系统(第二版)> 杨晓非 何丰 从傅里叶级数到傅里叶变换 通过分析连续周期信号的周期与频谱的关系,当周期趋于无穷大的时候,周期信号变成非周期信号.从频谱分析观点来看,当T ...

  6. memcache 拓展

    需要安装Libevent.memcached.memcache. 参考网址:https://www.cnblogs.com/hejun695/p/5369610.html 启动:/usr/local/ ...

  7. 读书笔记--Head First Python 目录

    1.初识python 2.共享你的代码 3.文件与异常 4.持久共享 5.推导数据 6.定制数据对象 7.web开发 8.移动应用开发 9.管理你的数据 10.扩展你的web应用 11.处理复杂性 其 ...

  8. git中由readme.md文件引发的问题

    在GitHub上建立一个仓库并且添加了readme.txt文件. 无论是push前先将远程仓库pull到本地仓库,还是强制push都会弹出这个问题. Github 禁用了TLS v1.0 and v1 ...

  9. hystrix熔断器

    在一个具有多服务的应用中,假如由于其中某一个服务出现问题,导致响应速度变慢,或是根本没有响应返回,会导致它的服务消费者由于长时间的等待,消耗尽线程,进而影响到对其他服务的线程调用,进而会转变为整个应用 ...

  10. day37 10-SH整合的案例练习

    <set name="orders" cascade="delete"> 如果没有在Customer.hbm.xml中配置级联删除,删除客户的时候默 ...