js常用方法和一些封装【永利澳门游戏网站】

明日上传的时候少了叁个主意,今后补上:

](http://upload-images.jianshu.io/upload_images/2658855-d08481501ae13976.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

//日期转换function transformDate{ if(typeof date =="string"){ return new Date(date.replace(/-/ig,"/").replace; }else{ return date; } }
  • CSS语法格式
勘误:_center()方法中timeBox应改为dom,封装方法的时候忘了改过来了,以往已校勘。

正文介绍部分时日操作相关的格局,经过构思,从这一篇初步,首要围绕贰个事例开首讲,先通过案例来说学一下中坚的操作。然后上干货
— 也正是各类包裹好的点子,都是能够直接使用的。

如有讲得至极的地点,恳请各位大神指正,招待商议和调侃。

好了,今后启幕显示案例:

永利澳门游戏网站 12.gif

本条例子是多个背景观遵照时间来动态变化的小demo,大家通晓16进制的颜料是近乎#666666这么的格式,而时间的格式是
hh:mm:ss,极度的形似,所以我们能够通过时间的改观来兑现如此的功力。

上面来深入分析一下这一个小demo。

首先步,在body区域中画二个div

 <div ></div>

永利澳门游戏网站 2Paste_Image.png

如图,当自家画三个div,借使不增添另外css样式的话,它既未有惊人也从不小幅度,可是仍攻陷一行,因为div是块级成分。顺便说一句,假若是行级成分,你就是给了它宽高,照旧不会起作用的。

例如,我们毫不div了,改用span来做。

接下去,大家给他增多一些主干的体裁吧:

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

永利澳门游戏网站 3Paste_Image.png

如图,你加了width和height仍旧没用滴。但是它会依附span里面包车型大巴剧情开展撑开。

像这样:

background: deeppink;

 123456

永利澳门游戏网站 4Paste_Image.png

二个化解办法正是将span晋级为行内块级成分。

display: inline-block;

永利澳门游戏网站 5Paste_Image.png

可知,当大家设置display为inline-block的时候,宽度和惊人就能发生变化了,何况不会把持一行。

诶,一看不对啊,大家自然期望里面包车型大巴文字在盒子内居中展示,那样才比较雅观嘛。

第一是程度居中,这些相比较轻易,只要求

text-align: center;

关于垂直居中,从前的css样式中,这一条代码就落到实处了

line-height: 60px;

line-height代表行高,当大家设置行高与容器中度相等的时候,文字就能够笔直居中。

永利澳门游戏网站 6Paste_Image.png

如此子好多了吧。

接下去,大家意在将以此盒子相对于body居中展现,咋做吧?

永利澳门游戏网站 7123.gif

网络流传的居中方法有那多少个,小编在此就罗列一种相比较简单的方法。依照暗示图,外层的大盒子代表body,笔者先将body分为左右约等于的两块,各八分之四的意趣,今后左上角的盒子代表已经晋升为inline-block的span成分,要让它水平居中,首先能够将这些盒子从左往右移动二分之一,可是那样的话,就多运动了自家宽度的二分之一,对不对?

也等于说,假诺要让它水平居中,只必要将以此盒子拖回来本人宽度的50%,就OK了。

笔直居中也是以此道理。

咱俩用js的措施来兑现:

//让元素居中的方法function _center{ 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; //dom方法的封装,请参考上一篇文章,其实就是document.getElementById。_center;

永利澳门游戏网站 8Paste_Image.png

从当中了,正是如此简约。

接下去,大家把文字和背景观删除掉,只留下这几个span。在调节和测验方式下,我们依旧得以看见这一个区域。

永利澳门游戏网站 9Paste_Image.png

作者们盼望得到hh:mm:ss格式的年月数额,而js原生态的date对象未有format方法,所以先经过下边包车型大巴代码扩展一下:

Date.prototype.format = function { 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), // 季度 "S" : this.getMilliseconds() // 毫秒 }; var week = { "0" : "星期日", "1" : "星期一", "2" : "星期二", "3" : "星期三", "4" : "星期四", "5" : "星期五", "6" : "星期六" }; if /.test { fmt = fmt.replace(RegExp.$1, (this.getFullYear .substr(4 - RegExp.$1.length)); } if /.test { 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.replace(RegExp.$1, (RegExp.$1.length == 1) ?  : (("00" + o[k]).substr(("" + o[k]).length))); } } return fmt;};

测试:

var now = new Date();var hh = now.format;var mm = now.format;var ss = now.format;var bgColor = '#' + hh + mm + ss ;alert;

永利澳门游戏网站 10Paste_Image.png

接下去,我们盼望随着时光的流淌来动态地获得背景象,于是能够如此

setInterval(function(){ var now = new Date(); var hh = now.format; var mm = now.format; var ss = now.format; var bgColor = '#' + hh + mm + ss ; console.log;},1000); //一秒钟变化一次

永利澳门游戏网站 11123.gif

接下去,只须要将动态获得的背景观加在body下面就可以啊!

var now = new Date();var hh = now.format;var mm = now.format;var ss = now.format;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; mm = now.format; ss = now.format; 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);

永利澳门游戏网站 12123.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; } else if (day_diff == 0 && diff < 3600) { buffer.push(Math.round(Math.floor(diff / 60)) + "分钟前"); } else if (day_diff == 0 && diff < 7200) { buffer.push; } else if (day_diff == 0 && diff < 86400) { buffer.push(Math.round(Math.floor(diff / 3600)) + "小时前"); } else if (day_diff == 1) { buffer.push; } 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{ return transformDate.getTime(); } //日期转换function transformDate{ if(typeof date =="string"){ return new Date(date.replace(/-/ig,"/").replace; }else{ return date; } } /*返回相差的毫秒数。*/function getDifMillSeconds(date1,date2){ var stimes = getMillTime(transformDate; var etimes = getMillTime(transformDate; return etimes - stimes;}/*返回相差的秒数。*/function getDifSeconds(date1,date2){ return Math.floor(getDifMillSeconds(date1,date2) / 1000);} /*返回相差的分。*/function getDifMinutes(date1,date2){ return Math.floor(getDifMillSeconds(date1,date2)/;}/*返回相差的小时。*/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;}/*获取相差的年份*/function getDifYear(date1,date2){ var times = getDifDays(date1,date2); return Math.floor(times/365);}/*获取年份*/function getYear{ return transformDate.getFullYear();}/*获取月*/function getMonth{ var month = transformDate.getMonth()+1; return month>9 ? month : "0"+month; } /*获取日*/ function getDay{ var day = transformDate.getDate(); return day >9 ? day : "0"+day; } /*获取今天星期几,如果为0代表星期日*/ function getWeek{ return transformDate.getDay(); } function getWeekChinese{ var weekdays = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; return weekdays[getWeek];} /*获取时*/ function getHour{ var hour = transformDate.getHours(); return hour >9 ? hour : "0"+hour; } /*12小时制时*/ function getHour12{ var hour = transformDate.getHours(); return hour%12 == 0 ? 12 : hour % 12; } /*分*/ function getMinute{ var minutes = transformDate.getMinutes(); return minutes >9 ? minutes : "0"+minutes; } /*秒*/ function getSecond{ var seconds = transformDate.getSeconds(); return seconds >9 ? seconds : "0"+seconds; } /*毫秒*/ function getMillisecond{ return transformDate.getMilliseconds(); } /*获取今天在当年是第几季度*/ function getPeriod{ var month = getMonth*1; return Math.floor/3); } /*根据输入的日期获取该年的第一天*/function getFirstDayOfYear{ var year = getYear; var dateString = year+"-01-01 00:00:00"; return dateString;}/*获取输入日期是当年中的第几天*/function getDayOfYear{ return Math.ceil(getDifDays(getFirstDayOfYear,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 + '年');console.log('本月是' + getMonth + '月');console.log('今天是' + getDay + '日');console.log('今年的第一天是' + getFirstDayOfYear;console.log('今年是星期' + getWeek;console.log('今年是' + getWeekChinese;//获取多久以前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")));

永利澳门游戏网站 13Paste_Image.png

本章结束 …

铁汉一小兔,电气自动化结业。加入工作后对Computer感兴趣,深知初学编制程序之艰苦。希望将和谐所学记录下来,给初学者一点救助。

免责注解
博客中存有的图片素材均来源于百度找出,仅供就学沟通,如有毛病请联系笔者,侵立删,谢谢。

永利澳门游戏网站 14

Paste_Image.png

  • CSS选择器
     基本采用器
    (1)”
    “选择器:通配符
      将合营全体的HTML标志,全数的标识都会转移的
      语法:*{color:red;}
    留意:尽量少用,因为IE6不援救

永利澳门游戏网站 15

Paste_Image.png

(2)标签选取器(在叁个HTML要变样式的气象下)

陈诉:将同盟钦赐的html标识
语法:h1{color:red;}
在乎:选用器的与HTML的称呼一样,但不可能加尖括号

永利澳门游戏网站 16

Paste_Image.png

(3)class选拔器(类选取器)(八个HTML标识要变为同同样式的状态下,是使用效用最高的)

  • 陈说:给一类HTML标志加样式,这里所指的”一类“是:每一种HTML标识都会有三个class属性,且class的性质一样.class是 公共属性,
    ,种种html都有。
  • 类选用器的名目,必须以”.”开首,后跟HTML标志的class属性的值。比如:.box{color:red}
  • HTML标识的class属性的值,无法以数字最初。

永利澳门游戏网站 17

Paste_Image.png

永利澳门游戏网站 18

Paste_Image.png

  • id选择器
    陈说:给钦点id的成分增加样式
    小心:网页中HTNL标识的id属性的值,必得是唯一的。
    每一个HTML标记都有一个id的公家属性 
    介怀:id属性日常是给js用的,不是用来夹样式的。Class属性只可以给CSS用,无法给JS用的,class属性加样式,id属性加动画

  • id接纳器的称呼,必得以”#”早先,后跟html标识的id属性的值。

![](https://upload-images.jianshu.io/upload_images/2658855-a3d037b3830e4781.png)

Paste_Image.png
  • 结合选用器
    (1)多成分选用器

  • 给八个因素加同同样式,五个选用器之间用逗号”,”隔绝

  • 举例:h1,div,body{color:red;}

永利澳门游戏网站 19

关键是因为网页中有多个<p>标志,全数应用了贰个class做差别。
(2)后代成分选取器(门户网址用的多,最常用)
呈报:给有个别标签的儿孙成分加样式
举例:div .title{color:red:}

永利澳门游戏网站 20

Paste_Image.png

想让<h1>加背景象

永利澳门游戏网站 21

Paste_Image.png

另外一种

永利澳门游戏网站 22

Paste_Image.png

想让<h1>变黄色<p>变棕色

永利澳门游戏网站 23

Paste_永利澳门游戏网站,Image.png

永利澳门游戏网站 24

Paste_Image.png

     代码的功力如下

永利澳门游戏网站 25

Paste_Image.png

3 子成分选取器
陈说:给某个成分的子成分加多样式
举例:div>h1.title{color:red;}

永利澳门游戏网站 26

Paste_Image.png

代码效果如下:

永利澳门游戏网站 27

发表评论

电子邮件地址不会被公开。 必填项已用*标注