昨天上传的时候少了一个方法，现在补上：
//日期转换
function transformDate(date){
if(typeof date =="string"){
return new Date(date.replace(/-/ig,"/").replace("T"," "));
}else{
return date;
}
}
勘误：_center()方法中timeBox应改为dom，封装方法的时候忘了改过来了，现在已更正。
本文介绍一些时间操作相关的方法，经过思考，从这一篇开始，主要围绕一个例子开始讲，先通过案例来讲解一下基本的操作。然后上干货 -- 也就是各种封装好的方法，都是可以直接使用的。
如有讲得不对的地方，恳请各位大神指正，欢迎评论和吐槽。
好了，现在开始展示案例：
这个例子是一个背景色根据时间来动态变化的小demo，我们知道16进制的颜色是类似#666666这样的格式，而时间的格式是 hh:mm:ss，非常的相似，所以我们能够通过时间的变动来实现这样的效果。
下面来分析一下这个小demo。
第一步，在body区域中画一个div
<div id="time" class="time"></div>
如图，当我画一个div，如果不添加任何css样式的话，它既没有高度也没有宽度，但是仍独占一行，因为div是块级元素。顺便说一句，如果是行级元素，你即便给了它宽高，还是不会起作用的。
比如，我们不用div了，改用span来做。
<span id="time" class="time"></span>
接下来，我们给他添加一些基本的样式吧：
color: #FFF2F4; height: 60px; width: 500px; font-size: 28px; line-height: 60px;
如图，你加了width和height还是没用滴。但是它会根据span里面的内容进行撑开。
像这样：
background: deeppink; <span id="time" class="time">123456</span>
一个解决方法就是将span升级为行内块级元素。
display: inline-block;
可见，当我们设置display为inline-block的时候，宽度和高度就会发生变化了，而且不会独占一行。
诶，一看不对啊，我们当然希望里面的文字在盒子内居中显示，这样才比较好看嘛。
首先是水平居中，这个比较简单，只需要
text-align: center;
至于垂直居中，之前的css样式中，这一条代码就实现了
line-height: 60px;
line-height代表行高，当我们设置行高与容器高度相等的时候，文字就会垂直居中。
这样子好多了吧。
接下来，我们希望将这个盒子相对于body居中显示，如何做呢？
网上流传的居中方法有很多，我在此就列举一种比较简单的方式。
根据示意图，外层的大盒子代表body，我先将body分为左右相等的两块，各50%的意思，现在左上角的盒子代表已经升级为inline-block的span元素，要让它水平居中，首先可以将这个盒子从左往右移动50%，但是这样的话，就多移动了自身宽度的一半，对不对？
也就是说，如果要让它水平居中，只需要将这个盒子拖回来自身宽度的一半，就OK了。
垂直居中也是这个道理。
我们用js的方式来实现：
//让元素居中的方法
function _center(dom){
dom.style.position = 'absolute';
dom.style.top = '50%';
dom.style.left = '50%';
dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
}
var timeBox = dom("#time"); //dom方法的封装，请参考上一篇文章，其实就是document.getElementById。
_center(timeBox);
居中了，就是如此简单。
接下来，我们把文字和背景色删除掉，只留下这个span。在调试模式下，我们依然可以看到这个区域。
我们希望拿到hh:mm:ss格式的时间数据，而js原生态的date对象没有format方法，所以先通过下面的代码扩展一下：
Date.prototype.format = function(fmt) {
var o = {
"Y+" : this.getFullYear(),
"M+" : this.getMonth() + 1,
// 月份
"d+" : this.getDate(),
// 日
"h+" : this.getHours() % 12 == 0 ? 12 : this.getHours() % 12,
// 小时
"H+" : this.getHours(),
// 小时
"m+" : this.getMinutes(),
// 分
"s+" : this.getSeconds(),
// 秒
"q+" : Math.floor((this.getMonth() + 3) / 3),
// 季度
"S" : this.getMilliseconds()
// 毫秒
};
var week = {
"0" : "星期日",
"1" : "星期一",
"2" : "星期二",
"3" : "星期三",
"4" : "星期四",
"5" : "星期五",
"6" : "星期六"
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
}
if (/(E+)/.test(fmt)) {
fmt = fmt.replace(
RegExp.$1,
((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f"
: "/u5468")
: "")
+ week[this.getDay() + ""]);
}
for ( var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
: (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
};
测试：
var now = new Date();
var hh = now.format('hh');
var mm = now.format('mm');
var ss = now.format('ss');
var bgColor = '#' + hh + mm + ss ;
alert(bgColor);
接下来，我们希望随着时间的流动来动态地获取背景色，于是可以这样
setInterval(function(){
var now = new Date();
var hh = now.format('hh');
var mm = now.format('mm');
var ss = now.format('ss');
var bgColor = '#' + hh + mm + ss ;
console.log(bgColor);
},1000); //一秒钟变化一次
接下来，只需要将动态获得的背景色加在body上面就可以啦！
var now = new Date();
var hh = now.format('hh');
var mm = now.format('mm');
var ss = now.format('ss');
var bgColor = '#' + hh + mm + ss ;
now = now.format('yyyy年MM月dd日 E hh:mm:ss');
document.body.style.background = bgColor;
time.innerHTML = now;
setInterval(function(){
now = new Date();
hh = now.format('hh');
mm = now.format('mm');
ss = now.format('ss');
now = now.format('yyyy年MM月dd日 E hh:mm:ss');
bgColor = '#' + hh + mm + ss ;
console.log('当前的背景颜色为：' + bgColor);
time.innerHTML = now;
document.body.style.background = bgColor;
},1000);
于是，关于这个小demo的讲解就愉快地结束了。
接下来，分享一下我搜集的关于时间操作的相关方法：
//获取多久以前，比如1秒前、一分钟前、一天前，等等
function getTimeFormat(startTime) {
var startTimeMills = startTime.getTime();
var endTimeMills = new Date().getTime();
var diff = parseInt((endTimeMills - startTimeMills) / 1000);//秒
var day_diff = parseInt(Math.floor(diff / 86400));//天
var buffer = Array();
if (day_diff < 0) {
return "[error],时间越界...";
} else {
if (day_diff == 0 && diff < 60) {
if (diff <= 0)
diff = 1;
buffer.push(diff + "秒前");
} else if (day_diff == 0 && diff < 120) {
buffer.push("1 分钟前");
} else if (day_diff == 0 && diff < 3600) {
buffer.push(Math.round(Math.floor(diff / 60)) + "分钟前");
} else if (day_diff == 0 && diff < 7200) {
buffer.push("1小时前");
} else if (day_diff == 0 && diff < 86400) {
buffer.push(Math.round(Math.floor(diff / 3600)) + "小时前");
} else if (day_diff == 1) {
buffer.push("1天前");
} else if (day_diff < 7) {
buffer.push(day_diff + "天前");
} else if (day_diff < 30) {
buffer.push(Math.round(Math.floor(day_diff / 7)) + " 星期前");
} else if (day_diff >= 30 && day_diff <= 179) {
buffer.push(Math.round(Math.floor(day_diff / 30)) + "月前");
} else if (day_diff >= 180 && day_diff < 365) {
buffer.push("半年前");
} else if (day_diff >= 365) {
buffer.push(Math.round(Math.floor(day_diff / 30 / 12)) + "年前");
}
}
return buffer.toString();
}
/*返回 1970 年 1 月 1 日至今的毫秒数。*/
function getMillTime(date){
return transformDate(date).getTime();
}
//日期转换
function transformDate(date){
if(typeof date =="string"){
return new Date(date.replace(/-/ig,"/").replace("T"," "));
}else{
return date;
}
}
/*返回相差的毫秒数。*/
function getDifMillSeconds(date1,date2){
var stimes = getMillTime(transformDate(date1));
var etimes = getMillTime(transformDate(date2));
return etimes - stimes;
}
/*返回相差的秒数。*/
function getDifSeconds(date1,date2){
return Math.floor(getDifMillSeconds(date1,date2) / 1000);
}
/*返回相差的分。*/
function getDifMinutes(date1,date2){
return Math.floor(getDifMillSeconds(date1,date2)/(1000*60));
}
/*返回相差的小时。*/
function getDifHours(date1,date2){
return Math.floor(getDifMillSeconds(date1,date2)/(1000*60*60));
}
/*返回相差的天数。*/
function getDifDays(date1,date2){
var times = getDifSeconds(date1,date2);
return Math.ceil(times/(3600 * 24));
}
/*返回相差的月份。*/
function getDifMonths(date1,date2){
var times = getDifDays(date1,date2);
return Math.floor(times/30);
}
/*获取相差的年份*/
function getDifYear(date1,date2){
var times = getDifDays(date1,date2);
return Math.floor(times/365);
}
/*获取年份*/
function getYear(date){
return transformDate(date).getFullYear();
}
/*获取月*/
function getMonth(date){
var month = transformDate(date).getMonth()+1;
return month>9 ? month : "0"+month;
}
/*获取日*/
function getDay(date){
var day = transformDate(date).getDate();
return day >9 ? day : "0"+day;
}
/*获取今天星期几,如果为0代表星期日*/
function getWeek(date){
return transformDate(date).getDay();
}
function getWeekChinese(date){
var weekdays = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weekdays[getWeek(date)];
}
/*获取时*/
function getHour(date){
var hour = transformDate(date).getHours();
return hour >9 ? hour : "0"+hour;
}
/*12小时制时*/
function getHour12(date){
var hour = transformDate(date).getHours();
return hour%12 == 0 ? 12 : hour % 12;
}
/*分*/
function getMinute(date){
var minutes = transformDate(date).getMinutes();
return minutes >9 ? minutes : "0"+minutes;
}
/*秒*/
function getSecond(date){
var seconds = transformDate(date).getSeconds();
return seconds >9 ? seconds : "0"+seconds;
}
/*毫秒*/
function getMillisecond(date){
return transformDate(date).getMilliseconds();
}
/*获取今天在当年是第几季度*/
function getPeriod(date){
var month = getMonth(date)*1;
return Math.floor((month+3)/3);
}
/*根据输入的日期获取该年的第一天*/
function getFirstDayOfYear(date){
var year = getYear(date);
var dateString = year+"-01-01 00:00:00";
return dateString;
}
/*获取输入日期是当年中的第几天*/
function getDayOfYear(date){
return Math.ceil(getDifDays(getFirstDayOfYear(date),date));
}
测试：
var date1 = transformDate("2016/8/10 09:12:45");
var date2 = transformDate("2016/8/10 08:12:45");
console.log('1个小时有' + getDifSeconds(date2,date1)); //一个小时为3600秒
date1 = transformDate("2016/8/11 08:12:45");
date2 = transformDate("2016/8/10 08:12:45");
console.log('1天有' + getDifHours(date2,date1) + '个小时'); //一天为24个小时
date1 = transformDate("2016/8/11 08:12:45");
date2 = transformDate("2016/7/11 08:12:45");
console.log('7月份有' + getDifDays(date2,date1) + '天');
date1 = transformDate("2016/8/11 08:12:45");
date2 = transformDate("2015/8/11 08:12:45");
console.log('一年为' + getDifMonths(date2,date1) + '个月');
date1 = transformDate("2016/8/11 08:12:45");
date2 = transformDate("2010/8/11 08:12:45");
console.log('2010年和2016年相差' + getDifYear(date2,date1) + '年');
var date = new Date();
console.log('今年是' + getYear(date) + '年');
console.log('本月是' + getMonth(date) + '月');
console.log('今天是' + getDay(date) + '日');
console.log('今年的第一天是' + getFirstDayOfYear(date));
console.log('今年是星期' + getWeek(date));
console.log('今年是' + getWeekChinese(date));
//获取多久以前
console.log('2016/8/16 09:10:45是' + getTimeFormat(transformDate("2016/8/16 09:10:45")));
console.log('1995/8/16是' + getTimeFormat(transformDate("1995/8/16")));