js常用方法和一些封装 -- 时间相关（附案例详解）

昨天上传的时候少了一个方法，现在补上：

//日期转换
function transformDate(date){
    if(typeof date =="string"){
        return new Date(date.replace(/-/ig,"/").replace("T"," "));
    }else{
        return date;
    }
 }
勘误：_center()方法中timeBox应改为dom，封装方法的时候忘了改过来了，现在已更正。

本文介绍一些时间操作相关的方法，经过思考，从这一篇开始，主要围绕一个例子开始讲，先通过案例来讲解一下基本的操作。然后上干货 -- 也就是各种封装好的方法，都是可以直接使用的。

如有讲得不对的地方，恳请各位大神指正，欢迎评论和吐槽。

好了，现在开始展示案例：

2.gif

这个例子是一个背景色根据时间来动态变化的小demo，我们知道16进制的颜色是类似#666666这样的格式，而时间的格式是 hh:mm:ss，非常的相似，所以我们能够通过时间的变动来实现这样的效果。

下面来分析一下这个小demo。

第一步，在body区域中画一个div

 <div id="time" class="time"></div>
Paste_Image.png

如图，当我画一个div，如果不添加任何css样式的话，它既没有高度也没有宽度，但是仍独占一行，因为div是块级元素。顺便说一句，如果是行级元素，你即便给了它宽高，还是不会起作用的。

比如，我们不用div了，改用span来做。

 <span id="time" class="time"></span>

接下来，我们给他添加一些基本的样式吧：

color: #FFF2F4;
height: 60px;
width: 500px;
font-size: 28px;
line-height: 60px;
Paste_Image.png

如图，你加了width和height还是没用滴。但是它会根据span里面的内容进行撑开。

像这样：

background: deeppink;

 <span id="time" class="time">123456</span>
Paste_Image.png

一个解决方法就是将span升级为行内块级元素。

display: inline-block;
Paste_Image.png

可见，当我们设置display为inline-block的时候，宽度和高度就会发生变化了，而且不会独占一行。

诶，一看不对啊，我们当然希望里面的文字在盒子内居中显示，这样才比较好看嘛。

首先是水平居中，这个比较简单，只需要

text-align: center;

至于垂直居中，之前的css样式中，这一条代码就实现了

line-height: 60px;

line-height代表行高，当我们设置行高与容器高度相等的时候，文字就会垂直居中。

Paste_Image.png

这样子好多了吧。

接下来，我们希望将这个盒子相对于body居中显示，如何做呢？

123.gif

网上流传的居中方法有很多，我在此就列举一种比较简单的方式。
根据示意图，外层的大盒子代表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);
Paste_Image.png

居中了，就是如此简单。

接下来，我们把文字和背景色删除掉，只留下这个span。在调试模式下，我们依然可以看到这个区域。

Paste_Image.png

我们希望拿到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);
Paste_Image.png

接下来，我们希望随着时间的流动来动态地获取背景色，于是可以这样

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); //一秒钟变化一次
123.gif

接下来，只需要将动态获得的背景色加在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);
123.gif

于是，关于这个小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")));
Paste_Image.png

本章结束 ...

剽悍一小兔，电气自动化毕业。
参加工作后对计算机感兴趣，深知初学编程之艰辛。
希望将自己所学记录下来，给初学者一点帮助。

免责声明： 博客中所有的图片素材均来自百度搜索，仅供学习交流，如有问题请联系我，侵立删，谢谢。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,590评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,808评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,151评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,779评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,773评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,656评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,022评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,678评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,038评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,411评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,005评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2赞 343

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1赞 92
  • HTML快速入门（二）—— CSS简介
    前言： 1.HTML5的发展非常迅速，可以说已经是前端开发人员的标配，在电商类型的APP中更是运用广泛，这个系列的...
    珍此良辰阅读 1,909评论 2赞 15
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    wzhiq896阅读 1,730评论 0赞 2
  • 阳光烂灿泰国游（草稿）
    叮铃铃……早上六点三十分，还在睡梦中股长来电：“泰国机票降价了，赶紧订票吧”，不假思索地找到护照，请团长订好机票，...
    德国傻妞阅读 253评论 0赞 0
  • 人同此心！
    湛蓝碧空着柳色，绿烟瀑布空中泄。 玉帝下凡思尽孝，仙枝一垂献母亲。
    瀚正阅读 268评论 0赞 1