Day15:大前端

垂直水平居中

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">&lt;</div>
 <div class="btn btn_r">&gt;</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创建对象方式

工厂模式

构造函数模式

原型模式

将信息直接添加到原型对象上。

可以让所有的实例对象共享它所包含的属性和方法

Object.defineProperty方法

Object.defineProperty(Person.prototype, 'constructor', {
  enumerable: false,
  value: Person
})

动态原型模式

寄生构造函数模式

如何理解 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)，并在调用堆栈为空后执行。

如何理解高阶函数

区分声明函数和表达式函数

// 声明函数
function hello() {
 return "hello"
}
// 表达式
var a = function hello(){
return "hello"
}

严格模式(strict mode)

严格模式用于标准化正常的JavaScript语义。

原型继承

判断对象的数据类型

Object.prototype.toString.call(target)
isType
isArray()

a标签不可以嵌套交互式元素

p标签不能包含块级元素

li标签可以包含div以及ul，ul的子元素应该只有li

水平居中和垂直居中，水平垂直居中

jQuery轮播图

$(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