HTML和CSS部分
1.清除浮动的几种方式
/* 最好方法使用:after */
div:after{
content: '';
clear: both;
display: block;
width: 0;
height: 0;
}
/* 或者新建一个空元素来清除浮动 */
.clear{
clear: both;
height: 0;
line-height: 0;
font-size: 0;
}
/* 给父元素增加overflow属性 */
.over-flow{
over-flow: auto;
zoom: 1; /*处理兼容性问题*/
}
2.引入样式link与import区别
<!--link方式-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--import方式-->
<style type="text/css">
@import url(style01.css);
</style>
-
区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
-
区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
-
区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
-
区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。
3.CSS画三角形
div{
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom-color: red;/*下边框,向上的三角形*/
}
4.不使用border新建一个一像素的直线
<div style="height:1px; background-color: red; overflow: hidden; width: 100%"></div>
5.HTML5新特性
<li>语义化标签 nav header footer section aside</li>
<li>绘图的canvas</li>
<li>媒体的video和audio</li>
<li>localStorage与sessionStorage</li>
<li>表单控件:calendar、date、time、email、url、search</li>
<br/>
<h3>html5 与 html可以使用标签或者doctype区分</h3>
<br>
<h3>语义化使HTML结构更清晰,便于浏览器解析,利于SEO搜索,使代码更好理解,便于维护</h3>
6.CSS3动画
/*2D转换 transform*/
transform: translate(-20px, -20px); /*坐标内移动*/
transform: rotate(45deg); /*旋转*/
transform: scale(0.8); /*缩放*//*给定的宽度(X 轴)和高度(Y 轴)参数。transform: scale(2,4);*/
transform: skew(0, 20deg); /*倾斜*/
transform: matrix(0, 0, 0, 0, 0, 0); /*把所有 2D 转换方法组合在一起,需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素*/
/*3D转换*/
transform: rotateX(120deg); /*元素围绕其 X 轴以给定的度数进行旋转*/
transform: rotateY(120deg); /*元素围绕其 Y 轴以给定的度数进行旋转*/
/*transition 过渡效果*/
transition-property: all; /*执行动画对应属性 color background*/
transition-duration: 5s; /*动画持续时间*/
transition-timing-function: linear; /*动画变化的速率 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier */
transition-delay: 5s; /*延迟多久开始动画*/
transition: all 5s linear 5s;
/*animation 动画*/
animation-name: name;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 5s;
animation-iteration-count: infinite; /*指定元素播放动画的循环次数 infinite | <number>*/
animation-direction: normal; /*指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。*/
animation-play-state: paused; /*控制元素动画的播放状态*/
animation: name 5s linear 5s infinite normal paused;
7.CSS垂直和水平居中的几种方式
<section style="position: relative">
不固定宽高<br/>
position: absolute;<br/>
top: 50%;<br/>
left: 50%;<br/>
margin-left: -25%;<br/>
margin-top: -25%;<br/>
<style>
#div1{
width:15vw;
height: 15vw;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
margin-left: -25%;
margin-top: -25%;
background-color: #666666;
}
</style>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
</div>
</section>
<section>
不固定宽高<br/>
transform:translate(50%,50%)
<style>
#div2{
width:15vw;
height: 15vw;
overflow: hidden;
transform:translate(50%,50%);
background-color: #666666;
}
</style>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
</div>
</section>
<section style="position: relative">
固定宽高<br/>
position: absolute;<br/>
left: 0;<br/>
top: 0;<br/>
bottom: 0;<br/>
right: 0;<br/>
margin: auto;<br/>
<style>
#div3{
width:15vw;
height: 15vw;
overflow: hidden;
background-color: #666666;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
<div id="div3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
</div>
</section>
<section style="display: flex;
justify-content: center;
align-items: center;">
父元素使用:<br/>
display: flex;<br/>
justify-content: center;<br/>
align-items: center;<br/>
<style>
#div4{
width:15vw;
height: 15vw;
overflow: hidden;
background-color: #666666;
}
</style>
<div id="div4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
</div>
</section>
<section style="display: grid">
grid布局<br/>
父元素:display:grid;<br/>
子元素:align-self: center;<br/>
justify-self: center;<br/>
<style>
#div5{
width:15vw;
height: 15vw;
overflow: hidden;
background-color: #666666;
align-self: center;
justify-self: center;
}
</style>
<div id="div5">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
</div>
</section>
<section style="display: table">
父盒子宽高为100%<br/>
table布局<br/>
父元素:display:table;<br/>
子元素:display:table-cell
text-align: center;<br/>
verical-align: middle;<br/>
<style>
#div6{
width:15vw;
height: 15vw;
overflow: hidden;
background-color: #666666;
display: table-cell;
text-align: center;
vertical-align: middle;
}
</style>
<div id="div6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut deserunt incidunt itaque voluptate. Enim et eum, neque nihil officia perspiciatis suscipit tenetur voluptatem voluptatum! Architecto dolorem doloribus perspiciatis vitae.
</div>
</section>
JavaScript
1.闭包
function f() {
var i = 0;
function f1() {
i++;
return console.log(i);
}
}
//f1访问了构造函数f里的变量i
//就是闭包
2.JS继承的几种方式
<script>
var main = document.getElementById('main');
function log(s, color) {
this.color = color || '';
var p = document.createElement('p');
p.setAttribute('class', this.color);
p.innerHTML = s;
main.appendChild(p);
}
// JS继承实现方式
//定义一个动物类
function Animal(name) {
//属性
this.name = name || 'Animal';
//实例方法
this.sleep = function () {
return this.name + '正在睡觉!';
}
}
//原型方法
Animal.prototype.eat = function (food) {
return this.name + '正在吃' + food;
}
var ani = new Animal('cat');
//Test Code
log(ani.eat('fish'));
// 1.原型链继承
// 核心:将父类的实例作为子类的原型
// 特点
// 父类新增原型方法/原型属性,子类都能访问到
// 简单、易于实现
//
// 无法实现多继承
// 无法向父类构造函数传参
log('原型链继承', 'red')
function Cat() {
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';
Cat.prototype.eateat = function (food) {
return 'cat又吃' + food;
}
//
//Test Code
var cat = new Cat();
log(cat.name);
log(cat.eat('fish'));
log(cat.sleep());
log(cat.eateat('fish'));
log(cat instanceof Animal); //true
log(cat instanceof Cat); //true
// 2.构造继承
// 核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类
// 特点:
// 可以实现多继承(call多个父类对象)
// 创建子类实例时,可以向父类传递参数
//
// 缺点只能继承父类的实例属性和方法,不能继承原型属性/方法
// 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能
log('构造继承', 'red')
function Cat1(name) {
Animal.call(this);
this.name = name || 'Tom';
}
//Test Code
var cat1 = new Cat1();
log(cat1.name);
log(cat1.sleep());
log(cat1 instanceof Animal); //false
log(cat1 instanceof Cat1); //true
// 3.实例继承
// 核心:为父类实例添加新特性,作为子类实例返回
// 不支持多继承
log('实例继承', 'red');
function Cat2(name) {
var instance = new Animal();
instance.name = name || 'Tom';
return instance;
}
//Test Code
var cat2 = new Cat2();
log(cat2.name);
log(cat2.sleep());
log(cat2 instanceof Animal); // true
log(cat2 instanceof Cat2); // false
// 4.拷贝继承
// 支持多继承
// 效率低,内存占用高(因为要拷贝父类属性)
log('拷贝继承', 'red');
function Cat3(name) {
var animal = new Animal();
for (var p in animal) {
Cat3.prototype[p] = animal[p];
}
Cat3.prototype.name = name || 'Tom';
}
// Test Code
var cat3 = new Cat3();
log(cat3.name);
log(cat3.sleep());
log(cat3 instanceof Animal); // false
log(cat3 instanceof Cat3); // true
// 5.组合继承
// 核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
// 弥补了方式2的缺陷,可以继承实例属性或方法,也可以继承原型属性和方法
// 不存在引用属性共享问题
// 可传参
// 函数可复用
// 缺点 调用了两次父类构造函数,生成了两份实例
log('组合继承', 'red');
function Cat4(name) {
Animal.call(this);
this.name =name || 'Tom';
}
Cat4.prototype = new Animal();
//组合继承也需要修复构造函数指向
Cat4.prototype.constructor = Cat4;
var cat4 = new Cat4();
log(cat4.name);
log(cat4.sleep());
log(cat4 instanceof Animal); // true
log(cat4 instanceof Cat4); // true
// 6.寄生组合继承
// 核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法或属性,避免组合继承的缺点
// 堪称完美
// 实现较为复杂
log('寄生组合继承','red');
function Cat5(name) {
Animal.call(this);
this.name = name || 'Tom';
}
(function () {
//创建一个没有实例方法的类
var Super =function () {
};
Super.prototype = Animal.prototype;
//将实例作为子类的原型
Cat5.prototype = new Super();
})();
Cat5.prototype.constructor =Cat5;
// Test Code
var cat5 = new Cat5();
log(cat5.name);
log(cat5.sleep());
log(cat5 instanceof Animal); // true
log(cat5 instanceof Cat5); //true
</script>
3.JS的各种位置
//clientHeight表示的是可视区域的高度,不包含border和滚动条(css height + css padding)
console.log('clientHeight:'+document.getElementById('div').clientHeight);
//Element.scrollHeight 这个只读属性是一个元素内容高度的度量,包括由于溢出导致的视图中不可见内容
console.log('scrollHeight:'+document.getElementById('div').scrollHeight);
//HTMLElement.offsetHeight 是一个只读属性,它返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数
console.log('offsetHeight:'+document.getElementById('div').offsetHeight);
//clientTop一个元素顶部边框的宽度(以像素表示)。不包括顶部外边距或内边距。clientTop 是只读的
console.log('clientTop:'+document.getElementById('div').clientTop);
//Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
console.log('scrollTop:'+document.documentElement.scrollTop);
//HTMLElement.offsetTop 为只读属性,它返回当前元素相对于其 offsetParent 元素的顶部的距离
console.log('offsetTop:'+document.getElementById('div').offsetTop);
4.JS拖拽
<script>
window.onload = function () {
var oDiv = document.getElementsByTagName("div")[0];
/*鼠标点击的位置距离DIV左边的距离 */
var disX = 0;
/*鼠标点击的位置距离DIV顶部的距离*/
var disY = 0;
oDiv.onmousedown = function () {
var e = e || window.event;
disX = e.clientX - oDiv.offsetLeft;
disY = e.clientY - oDiv.offsetTop;
document.onmousemove = function (e) {
var e = e || window.event;
// 横轴坐标
var leftX = e.clientX - disX;
// 纵轴坐标
var topY = e.clientY - disY;
if (leftX < 0) {
leftX = 0;
}
/* 获取浏览器视口大小 document.document.documentElement.clientWidth*/
else if (leftX > document.documentElement.clientWidth - oDiv.offsetWidth) {
leftX = document.document.documentElement.clientWidth - oDiv.offsetWidth;
}
if (topY < 0) {
topY = 0;
}
else if (topY > document.documentElement.clientHeight - oDiv.offsetHeight) {
topY = document.documentElement.clientHeight - oDiv.offsetHeight;
}
oDiv.style.left = leftX + "px";
oDiv.style.top = topY + "px";
}
document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}
}
}
</script>
5.Cookie使用
window.onload = function () {
document.cookie = "userID=10000";
document.cookie = "name1=10000";
//document.cookie = "name2=10000";
document.cookie = "username=John Smith; expires=Thu, 18 Dec 2019 12:00:00 GMT; path=/";
// expires:过期时间
//移除Cookie name2
//document.cookie = "name2=1;expires=-1";
alert(document.cookie);
//exdays: 过期天数
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function removeCookie(key) {
setCookie(key, "", -1);
}
removeCookie("name2");
setCookie('userID', '123', 600);
alert(getCookie("userID"));
}
6.Promise简化ajax异步处理
function myXHR(method, url, data) {
var requset = new XMLHttpRequest();
return new Promise((resolve, reject) => {
requset.onreadystatechange = function () {
if (requset.readyState === 4) {
if (requset.status === 200) {
resolve(requset.responseText);
}
else {
reject(requset.status);
}
}
}
requset.open(method, url);
requset.send(data);
});
}
var p = myXHR('GET', 'url:');
p.then(responseText => {
console.log(responseText);
}).catch(status => {
console.log(new Error(status));
})
7.RAF(requestAnimationFrame)的使用
<div id="myDiv" style="background-color: lightblue;width: 0;height: 50px;line-height: 50px;">0%</div>
<button id="btn">run</button>
//显示器刷新率60Hz,so最平滑动画的最佳循环间隔为1000ms/60=16ms
//requestID = requestAnimationFrame(callback);
//requestAnimationFrame不需要设置时间间隔
//回调函数作为参数传入,会返回一个整数(定时器的编号),可以传递给cancelAnimationFrame用于取消这个函数的执行
//IE 9- 不支持该方法
var timer1 = requestAnimationFrame(function () {
});
var timer2 = requestAnimationFrame(function () {
});
var timer3 = requestAnimationFrame(function () {
});
console.log(timer1);//1
console.log(timer2);//2
console.log(timer3);//3
//cancelAnimationFrame
cancelAnimationFrame(timer1);
cancelAnimationFrame(2);
cancelAnimationFrame(3);
//兼容IE
if (!window.requestAnimationFrame) {
var lastTime = 0;
window.requestAnimationFrame = function (callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
}, timeToCall);
lastTime = currTime + timeToCall;
return id;
}
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
//示例
var myDiv = document.getElementById('myDiv');
var btn = document.getElementById('btn');
var timer;
btn.onclick = function () {
myDiv.style.width = '0';
cancelAnimationFrame(timer);
timer = requestAnimationFrame(function fn() {
if (parseInt(myDiv.style.width) < 500) {
myDiv.style.width = parseInt(myDiv.style.width) + 5 + 'px';
myDiv.innerHTML = parseInt(myDiv.style.width) / 5 + ' %';
timer = requestAnimationFrame(fn);
} else {
cancelAnimationFrame(timer);
}
});
}
8.js怎么控制一次加载一张图片,加载完后再加载下一张(监控图片是否加载完成)
// 方法一
var obj=new Image();
obj.src="URL";
obj.onload=function(){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
// 方法二
var obj=new Image();
obj.src="URL";
obj.onreadystatechange=function(){
if(this.readyState=="complete"){
alert('图片的宽度为:'+obj.width+';图片的高度为:'+obj.height);
document.getElementById("mypic").innnerHTML="<img src='"+this.src+"' />";
}
}
9.Job queue 的执行顺序
//在Job queue中的队列分为两种类型:macro-task和microTask。
// macro-task队列包含任务: a1, a2 , a3
// micro-task队列包含任务: b1, b2 , b3
//
// 执行顺序为,首先执行marco-task队列开头的任务,也就是 a1 任务,执行完毕后,
// 在执行micro-task队列里的所有任务,也就是依次执行***b1, b2 , b3***,执行完后清空micro-task中的任务,
// 接着执行marco-task中的第二个任务,依次循环。
//macro-task队列真实包含任务:
//script(主程序代码),setTimeout, setInterval, setImmediate, I/O, UI rendering
//micro-task队列真实包含任务:
//process.nextTick, Promises, Object.observe, MutationObserver
//举例
setTimeout(function () {
console.log(1)
}, 0);
new Promise(function (resolve, reject) {
console.log(2);
resolve();
}).then(function () {
console.log(3)
}).then(function () {
console.log(4)
});
process.nextTick(function () {
console.log(5)
});
console.log(6);
//输出2,6,5,3,4,1
//这里要注意的一点在定义promise的时候,promise构造部分是同步执行的,这样问题就迎刃而解了。
// 首先分析Job queue的执行顺序:
//
// script(主程序代码)——>process.nextTick——>promise——>setTimeout
//
// I) 主体部分: 定义promise的构造部分是同步的,
// 因此先输出2 ,主体部分再输出6(同步情况下,就是严格按照定义的先后顺序)
//
// II)process.nextTick: 输出5
//
// III)promise: 这里的promise部分,严格的说其实是promise.then部分,输出的是3,4
//
// IV) setTimeout : 最后输出1
//
// 综合的执行顺序就是: 2——>6——>5——>3——>4——>1
10.原生ajax的请求过程
function getXHR() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject('Msxml2.XMLHTTP');//MSXML3
} catch (e) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP')
}
catch (e) {
alert('不支持');
}
}
}
return xhr;
}
var xhr = getXHR();
xhr.open('GET', url, true);//true 是否异步
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = xhr.responseText;
console.log(data);
}
}
}
xhr.onerror = function () {
console.log('error');
}
xhr.send();//发送请求
(JavaScript部分未完成,待更新)