JS常用方法和一些封装:时间相关(附案例详解)
author:一佰互联 2019-03-26   click:183

简介:昨天上传的时候少了一个方法,现在补上://日期转换 function transformDate(date){ if(typeof date =="string"){ return new Date(date.replace(/-/ig,"/").replace("T"," ")); }else{ return ...

昨天上传的时候少了一个方法,现在补上:
//日期转换function transformDate(date){ if(typeof date =="string"){ return new Date(date.replace(/-/ig,"/").replace("T"," ")); }else{ return date; } }

勘误:_center()方法中timeBox应改为dom,封装方法的时候忘了改过来了,现在已更正。

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

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

好了,现在开始展示案例:

JS常用方法和一些封装:时间相关(附案例详解)


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

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

第一步,在body区域中画一个div
 <div id="time" class="time"></div>

JS常用方法和一些封装:时间相关(附案例详解)


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

比如,我们不用div了,改用span来做。
 <span id="time" class="time"></span>

接下来,我们给他添加一些基本的样式吧:
color: #FFF2F4;height: 60px;width: 500px;font-size: 28px;line-height: 60px;

JS常用方法和一些封装:时间相关(附案例详解)


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

像这样:
background: deeppink; <span id="time" class="time">123456</span>

JS常用方法和一些封装:时间相关(附案例详解)


一个解决方法就是将span升级为行内块级元素。
display: inline-block;

JS常用方法和一些封装:时间相关(附案例详解)


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

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

首先是水平居中,这个比较简单,只需要
text-align: center;

至于垂直居中,之前的css样式中,这一条代码就实现了
line-height: 60px;

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

JS常用方法和一些封装:时间相关(附案例详解)


这样子好多了吧。

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

JS常用方法和一些封装:时间相关(附案例详解)


网上流传的居中方法有很多,我在此就列举一种比较简单的方式。

根据示意图,外层的大盒子代表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);

JS常用方法和一些封装:时间相关(附案例详解)


居中了,就是如此简单。

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

JS常用方法和一些封装:时间相关(附案例详解)


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

JS常用方法和一些封装:时间相关(附案例详解)


接下来,我们希望随着时间的流动来动态地获取背景色,于是可以这样
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); //一秒钟变化一次

JS常用方法和一些封装:时间相关(附案例详解)


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

JS常用方法和一些封装:时间相关(附案例详解)


于是,关于这个小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")));

JS常用方法和一些封装:时间相关(附案例详解)


本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱qq2522407257。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云学院www.yx10011.com。