Day15:大前端
2019-07-15 本文已影响75人
魔王哪吒
垂直水平居中
css:
display: table-cell; text-align: center; vertical-align: middle;
div:
display: inline-block; vertical-align: middle;
position几个属性
position: relative, absolute, fixed, static
开关灯
<style type="text/css">
.off{
background-color: #000;
}
</style>
<script type="text/javascript" src="../js/jquery.js" ></script>
<script>
$("#btn").click(function(){
if(flag){
$("body").removeClass("off");
$(this).text("关灯")
}else{
$("body").addClass("off");
$(this).text("开灯")
}
$("body").toggleClass("off");
var txt=$(this).text === "开灯" ? "关灯": "开灯";
$(this).text(txt);
}
)
</script>
px，em，rem的区别？
px 像素（Pixel）
em 是相对长度单位
相对于当前对象内文本的字体尺寸
rem是一个相对单位
什么是BFC？
BFC(Block formatting context)直译为"块级格式化上下文"。
一个独立的渲染区域
实现无缝轮播图
<div class="banner">
<ul class="img">
<li><img src="img/1.jpg" alt=""/></li>
<li><img src="img/2.jpg" alt=""/></li>
</li><img src="img/3.jpg" alt=""/></li>
</ul>
<ul class="num"></ul>
<div class="btn btn_l"><</div>
<div class="btn btn_r">></div>
</div>
<script>
$(document).ready(function() {
var total = 0;//計算器
var clone = $(".banner .img li").first().clone();
$(".banner .img").append(clone);
var size = $(".banner .img li").size();
for(var j = 0; j<size-1; j++) {
$(".banner .num").append("<li>"+(j+1)+"</li>");
}
$(".banner .num li").first().addClass("on");
for(var j = 1; j<size; j++) {
$(".banner .num").append("<li>"+j+"</li>");
}
$(".banner .num li").first().addClass("on");
var t = setInterval(function() {
total++;
move();
}, 2000);
$(".banner").hover(function() {
clearInterval(t); //鼠标悬停时清除定时器
}, function() {
t = setInterval(function() {
total++;
move();
}, 2000); //鼠标移出时开始定时器
});
$(".banner .num li").hover(function() {
var index = $(this).index(); //获取当前索引值
total= index;
$(".banner .img").stop().animate({
left: -index * 660
}, 500);
$(this).addClass("on").siblings().removeClass("on");
});
/*向左按钮*/
$(".banner .btn_l").click(function() {
total--;
move();
}) /*向右按钮*/
$(".banner .btn_r").click(function() {
total++;
move();
}) /*移动事件*/
function move() {
if(total == size) {
$(".banner .img").css({
left: 0
});
total = 1;
}
if(total == -1) {
$(".banner .img").css({
left: -(size - 1) * 660
});
total = size - 2;
}
$(".banner .img").stop().animate({
left: -total * 660
}, 660);
if(total == size - 1) {
$(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");
} else {
$(".banner .num li").eq(total).addClass("on").siblings().removeClass("on");
}
}
});
</script>
box-sizing、transition、translate
box-sizing用来指定盒模型的大小的计算方式
分为boreder-box（从边框固定盒子大小）、content-box（从内容固定盒子大小）两种计算方式。
transition： 当前元素只要有“属性”发生变化时，可以平滑的进行过渡。
transtion-duration 设置过渡时间；
trantion-timing-function 设置过渡速度；
trantion-delay 设置过渡延时
translate：通过移动改变元素的位置；有 x、y、z 三个属性
选择器优先级
！important>行内样式>id 选择器>类选择器>标签选择器>通配符>继承
Iframe的作用？
用来在网页中插入第三方页面
xhtml和 html 有什么区别
XHTML 是一个基于 XML 的置标语言
HTML是一种基本的 WEB 网页设计语言
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭。
标签名必须用小写字母。
XHTML文档必须拥有根元素。
title 与 alt 属性
Alt 当图片不显示时，用文字代表
Title为该属性提供信息
在新窗口打开链接
target：_blank。
Web 语义化的理解
让浏览器更好的读懂你写的代码，在进行 HTML 结构、表现、行为设计时，尽量使用语义化的标签，使程序代码简介明了，易于进行Web 操作和网站 SEO
DOCTYPE
一种标准通用标记语言的文档类型声明
告诉标准通用标记语言解析器
display：none；与 visibility： hidden
display：none；
各种属性值都将“丢失”；
visibility：hidden；
它所占据的空间位置仍然存在
实现无缝轮播图
<script src="common.js"></script>
<script>
//获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取相框的宽度
var imgWidth = screen.offsetWidth;
//获取ul
var ulObj = screen.children[0];
//获取ul中的所有的li
var list = ulObj.children;
//获取ol
var olObj = screen.children[1];
//焦点的div
var arr = my$("arr");
var pic = 0;//全局变量
//创建小按钮----根据ul中的li个数
for (var i = 0; i < list.length; i++) {
//创建li标签,加入到ol中
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
//在每个ol中的li标签上添加一个自定义属性,存储索引值
liObj.setAttribute("index", i);
//注册鼠标进入事件
liObj.onmouseover = function () {
//先干掉所有的ol中的li的背景颜色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
//设置当前鼠标进来的li的背景颜色
this.className = "current";
//获取鼠标进入的li的当前索引值
pic = this.getAttribute("index");
//移动ul
animate(ulObj, -pic * imgWidth);
};
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放
var timeId= setInterval(clickHandle,1000);
//鼠标进入到box的div显示左右焦点的div
box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearInterval(timeId);
};
//鼠标离开到box的div隐藏左右焦点的div
box.onmouseout = function () {
arr.style.display = "none";
//鼠标离开自动播放
timeId= setInterval(clickHandle,1000);
};
//右边按钮
my$("right").onclick =clickHandle;
function clickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
};
//左边按钮
my$("left").onclick = function () {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色---所有的小按钮干掉颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 10);
}
</script>
/*
* 该函数是返回的是指定格式的日期,是字符串类型
* 参数:date ----日期
* 返回值: 字符串类型的日期
* */
function getDatetoString(date) {
var strDate;//存储日期的字符串
//获取年
var year=date.getFullYear();
//获取月
var month=date.getMonth()+1;
//获取日
var day=date.getDate();
//获取小时
var hour=date.getHours();
//获取分钟
var minute=date.getMinutes();
//获取秒
var second=date.getSeconds();
hour=hour<10?"0"+hour:hour;
minute=minute<10?"0"+minute:minute;
second=second<10?"0"+second:second;
//拼接
strDate=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;//隐藏问题,关于变量声明的位置
return strDate;
}
//根据id获取元素对象
function my$(id) {
return document.getElementById(id);
}
/*
*
* innerText属性IE中支持
* textContent火狐中支持
* dvObj.innerText="您好";设置innerText的值
* console.log(dvObj.innerText);获取innerText的值
* 因为上述原因,inerText有时候需要设置值，有时候需要获取值
* 所以,需要写一个兼容的代码能在火狐中使用,也可以在IE中使用
*
*
* */
/*
*设置innerText属性的值
* element-----为某个元素设置属性值
* content-----设置的值
* */
function setInnerText(element,content) {
if(typeof element.textContent==="undefined"){
//IE浏览器
element.innerText=content;
}else{
element.textContent=content;
}
}
/*
* 获取innerText属性的值
* element 要获取的元素
* 返回的是该元素的innerText值
* */
function getInnerText(element) {
if(typeof element.textContent==="undefined"){
//IE浏览器
return element.innerText;
}else{
return element.textContent;
}
}
//获取当前元素前一个元素
function getPreviousElement(element) {
if(element.previousElementSibling){
return element.previousElementSibling;
}else{
var ele=element.previousSibling;
while (ele&&ele.nodeType!==1){
ele=ele.previousSibling;
}
return ele;
}
}
//获取当前元素的后一个元素
function getNextElement(element) {
if(element.nextElementSibling){
return element.nextElementSibling;
}else{
var ele=element.nextSibling;
while(ele&&ele.nodeType!==1){
ele=ele.nextSibling;
}
return ele;
}
}
//获取父元素中的第一个元素
function getFirstElementByParent(parent) {
if(parent.firstElementChild){
return parent.firstElementChild;
}else{
var ele=parent.firstChild;
while (ele&&ele.nodeType!==1){
ele=ele.nextSibling;
}
return ele;
}
}
//获取父元素中的最后一个元素
function getLastElementByParent(parent) {
if(parent.lastElementChild){
return parent.lastElementChild;
}else{
var ele=parent.lastChild;
while(ele&&ele.nodeType!==1){
ele=ele.previousSibling;
}
return ele;
}
}
//获取兄弟元素
function getsiblings(ele) {
if(!ele)return;//判断当前的ele这个元素是否存在
var elements=[];//定义数组的目的就是存储当前这个元素的所有的兄弟元素
var el=ele.previousSibling;//当前元素的前一个节点
while (el){
if (el.nodeType===1){//元素
elements.push(el);//加到数组中
}
el=el.previousSibling;
}
el=ele.nextSibling;
while(el){
if(el.nodeType===1){
elements.push(el);
}
el=el.nextSibling;
}
return elements;
}
// //能力检测多个浏览器为同一个对象注册多个事件
var EventTools= {
//为对象添加注册事件
addEventListener: function (element, eventName, listener) {
if (element.addEventListener) {
element.addEventListener(eventName, listener, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, listener)
} else {
element["on" + eventName] = listener;
}
},
//为对象移除事件
removeEventListener: function (element, eventName, listener) {
if (element.removeEventListener) {
element.removeEventListener(eventName, listener, false);
} else if (element.detachEvent) {
element.detachEvent("on" + eventName, listener);
} else {
element["on" + eventName] = null;
}
},
//获取参数e
getEvent: function (e) {
return e || window.event;
},
getPageX: function (e) {
if (e.pageX) {
return e.pageX;
} else {
//有的浏览器把高度设计在了文档的第一个元素中了
//有的浏览器把高度设计在了body中了
//document.documentElement.scrollTop;//文档的第一个元素
//document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return e.clientX + scrollLeft;
}
},
getPageY: function (e) {
if (e.pageY) {
return e.pageY;
} else {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return e.clientY + scrollTop;
}
}
};
//获取元素的当前位置,移动,每次移动多少像素
// function animate(element,target) {
// //每次调用这个函数的时候先清理之前的计时器
// clearInterval(element.setId);
// element.setId=setInterval(function () {
// //获取元素当前的位置
// var current=element.offsetLeft;
// //每次移动的像素
// var step=15;
// //判断移动的步数应该是正数还是负数
// step=current<target?step:-step;
// //当前的位置=之前的当前位置+移动的步数
// current=current+step;
// if(Math.abs(target-current)<Math.abs(step)){
// //把计时器清理
// clearInterval(element.setId);
// element.style.left=target+"px";
// }else{
// //赋值给要移动的元素
// element.style.left=current+"px";
// }
// },20);
// }
//
检测Internet Explorer版本
$(document).ready(function() {
if(navigator.userAgent.match(/msie/i)){
alert();
}
}):
平稳滑动到页面顶部
$("a[href='#top']").click(function(){
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
固定在顶部
function() {
var $win = $(window)
var $nav = $(".mytoolbar");
var navTop = $(".mytoolbar").length && $(".mytoolbar").offset().top;
var isFixed = 0;
processScroll()
$win.on("scroll", processScroll)
function processScroll() {
var i, scrollTop = $win.scrollTop()
if(scrollTop >= navTop && !isFixed) {
isFixed = 1
$nav.addClass("subnav-fixed")
}else if(scrollTop <= navTop && isFixed) {
isFixed = 0
$nav.removeClass("subnav-fixed")
}
取代html标志
$("li").replaceWith(function() {
return $("<div />").append($(this).contents());
});
检测视窗宽度
var responsive_viewport = $(window).width();
if(responsive_viewport < 481){
alert();
}
检测复制、粘贴和剪切的操作
$("#textA").bind("copy", function() {
$("span").text("copy")
});
$("#textA").bind("paste", function() {
$("span").text("paste")
});
$("#textA").bind("cut", function() {
$("span").text("cut")
});
在文本或密码输入时禁止空格键
$("input.nospace").keydown(function(e){
if(e.keyCode == 32){
return false;
}
});
JS创建对象方式
工厂模式
image.png
image.png
构造函数模式
image.png
原型模式
image.png
将信息直接添加到原型对象上。
可以让所有的实例对象共享它所包含的属性和方法
image.png
Object.defineProperty方法
Object.defineProperty(Person.prototype, 'constructor', {
enumerable: false,
value: Person
})
动态原型模式
image.png
寄生构造函数模式
image.png
如何理解 JS 中的this关键字
“this” 一般是表示当前所在的对象
JS中的this关键字由函数的调用者决定，谁调用就this就指向哪个。如果找不到调用者，this将指向windows对象。
由于 this 关键字很混乱，如何解决这个问题
使用bind，call，apply函数也可以解决问题。
什么是闭包
闭包是在另一个作用域内创建一个封闭的词法范围
function add(n){
var num = n
return function addTo(x) {
return x + num
}
}
addTwo = add(2)
addTwo(5)
变量的提升
初始化不会被提升，提升仅作用于变量的声明。
变量的提升是JavaScript的默认行为
JS处理同步和异步情况
一旦函数被调用，函数将被推入堆栈。然而，异步函数不会立即被推入调用堆栈，而是会被推入任务队列(Task Queue)，并在调用堆栈为空后执行。
如何理解高阶函数
image.png
区分声明函数和表达式函数
// 声明函数
function hello() {
return "hello"
}
// 表达式
var a = function hello(){
return "hello"
}
严格模式(strict mode)
严格模式用于标准化正常的JavaScript语义。
image.png
原型继承
image.png
判断对象的数据类型
Object.prototype.toString.call(target)
isType
isArray()
a标签不可以嵌套交互式元素
p标签不能包含块级元素
li标签可以包含div以及ul，ul的子元素应该只有li
image
image
image
image.png
image.png
image.png
image.png
水平居中和垂直居中，水平垂直居中
image.png
image.png
jQuery轮播图
image.png
$(function() {
var index = 0; //计数器
var lw=$(".banner ul li").width();//获取li的宽度
//复制第一个li标签元素及其内容
var firstImg = $(".banner ul li").eq(0).clone();
$(".banner ul").append(firstImg);
var imgLen = $(".banner ul li").length;
//向左移动
$(".arrow-left").click(function() {
index--;
move();
})
//向右移动
$(".arrow-right").click(function() {
index++;
move();
})
//移动事件
function move() {
//当索引index=图片的长度为第五张（回到下标为1的图片)
if(index == imgLen) {
$(".banner ul").css("left", "0px");
index = 1;
}
//当索引index为-1即克隆的那张，第一张下标为0，前面那张下标为-1（回到下标为4的图片)倒数第二张
if(index == -1) {
$(".banner ul").css("left", -(imgLen - 1) * lw + "px");
index = imgLen - 2;
}
$(".banner ul").stop().animate({
"left": -index * lw + "px"
}, 500);
if(index == imgLen - 1) {
$(".banner .icon span ").eq(0).addClass("on").siblings().removeClass("on")
} else {
$(".banner .icon span ").eq(index).addClass("on").siblings().removeClass("on")
}
}
//动态添加分页器内容
for(var j = 1; j<imgLen; j++) {
$(".banner .icon").append("<span>"+j+"</span>");
}
$(".banner .icon span ").eq(0).addClass("on").siblings().removeClass("on");
/*自动轮播*/
var timeId = setInterval(function() {
index++;
move();
}, 1500);
/*鼠标滑入原点事件*/
$(".banner .icon span").mouseenter(function(){
var x=$(this).index();//获取当前索引值
index=x;
$(".banner ul").stop().animate({"left":-index*lw+"px"},500);
$(this).addClass("on").siblings().removeClass("on");
})
/*鼠标悬停事件*/
$(".banner").hover(function() {
clearInterval(timeId); //鼠标悬停时清除定时器
}, function() {
timeId = setInterval(function() {
index++;
move();
}, 1500); //鼠标移出时开始定时器
});
})
请点赞！因为你的鼓励是我写作的最大动力！
官方微信公众号
吹逼交流群：711613774
吹逼交流群
