JavaScript学习之 倒计时
倒计时很常见，例如离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学习之 倒计时的更多相关文章
- JavaScript学习（一） —— 环境搭建与JavaScript初探
1.开发环境搭建 本系列教程的开发工具,我们采用HBuilder. 可以去网上下载最新的版本,然后解压一下就能直接用了.学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个 ...
- Web编程基础--HTML、CSS、JavaScript 学习之课程作业“仿360极速浏览器新标签页”
Web编程基础--HTML.CSS.JavaScript 学习之课程作业"仿360极速浏览器新标签页" 背景: 作为一个中专网站建设出身,之前总是做静态的HTML+CSS+DIV没 ...
- JavaScript学习（3）：函数式编程
在这篇文章里,我们讨论函数式编程. 什么是函数式编程?根据百度百科的描述,“函数式编程是种编程典范,它将电脑运算视为函数的计算.函数编程语言最重要的基础是 λ 演算(lambda calculus). ...
- JavaScript学习（2）：对象、集合以及错误处理
在这篇文章里,我们讨论一下JavaScript中的对象.数组以及错误处理. 1. 对象 对象是JavaScript中的一种基本类型,它内部包含一些属性,我们可以对这些属性进行增删操作. 1.1 属性 ...
- JavaScript学习13 JavaScript中的继承
JavaScript学习13 JavaScript中的继承 继承第一种方式:对象冒充 <script type="text/javascript"> //继承第一种方式 ...
- JavaScript学习12 JS中定义对象的几种方式
JavaScript学习12 JS中定义对象的几种方式 JavaScript中没有类的概念,只有对象. 在JavaScript中定义对象可以采用以下几种方式: 1.基于已有对象扩充其属性和方法 2.工 ...
- JavaScript学习11 数组排序实例
JavaScript学习11 数组排序实例 数组声明 关于数组对象的声明,以前说过:http://www.cnblogs.com/mengdd/p/3680649.html 数组声明的一种方式: va ...
- JavaScript学习10 JS数据类型、强制类型转换和对象属性
JavaScript学习10 JS数据类型.强制类型转换和对象属性 JavaScript数据类型 JavaScript中有五种原始数据类型:Undefined.Null.Boolean.Number以 ...
- JavaScript学习09 函数本质及Function对象深入探索
JavaScript学习09 函数本质及Function对象深入探索 在JavaScript中,函数function就是对象. JS中没有方法重载 在JavaScript中,没有方法(函数)重载的概念 ...
随机推荐
- JS防抖动
这道题目经常与事件触发器同时存在,为了考察面试者在一些具体业务流程上(信息流,搜索框输入查询)等,能否综合的考虑实现思路. 题目:在某些信息列表中一般采用瀑布流,滚动一屏时加载相应的数据,请思考如何避 ...
- 利用Qt自带工具发布程序
Qt官方开发环境生成的exe发布方式--使用windeployqt 从开始菜单-->Qt 5.4.0-->5.4-->MinGW 4.9 (32-bit)-->Qt 5.4 f ...
- VS2013生成、使用dll，lib文件
VS2013生成DLL文件 vs2013创建及使用DLL 一般来说项目偏爱生成dll动态库文件,因为可以解决静态库造成的空间浪费和更新困难问题,另外创建静态库时,我一般是建立空项目后,在项目配置类型中 ...
- 磁力搜索网站 BT torrent search engine 推荐 2019/12/25日更新
btkitty 知名的BT磁力搜索,资源很多,中文友好 btdb 知名的BT磁力搜索,资源很多,中文友好 838888 不错的 BT 磁力搜索引擎,资源很多,中文友好 idope.se 资源丰富的BT ...
- logo 编程
玩了一把logo语言,好学易懂,小朋友有兴趣是个挺不错的玩意.当然也可用于一些机器人等控制 apt install ucblogo ;一个多边形 l 边长 n 边数 to sj :l :n repea ...
- day18 11.复习
其实以前写的每条SQL语句都是有事务的,因为它默认的事务是autocommit=on(自动事务).mysql的autocommit是on,oracle的autocommit是off.
- win10 ubuntu 双系统启动顺序设置
之前安装ubuntu的时候就遇到过这个问题, 当时解决了,设置成开始可以选择启动ubuntu系统还是win系统. 但是过了好久后又忘记了,最近win10开了一次安全模式启动后,一开机就是win10,u ...
- API安全验证之JWT(JSON WEB TOKEN) OLCMS
假如www.olcms.com/getUserInfo获取用户信息,你怎么知道当前用户是谁?有人说登陆时候我把他UID写入session了,如果是API接口,没有session怎么办,那么就需要把UI ...
- Linux平台的SVN服务器的配置及搭建
https://jingyan.baidu.com/article/54b6b9c08b35382d593b477c.html 一.安装SVN 1 在Linux平台上,SVN的软件包名称是subv ...
- oracle触发器级联删除
create or replace trigger delete_trigger1 after delete on contracting_party for each row begin if de ...