常用组件

一、轮播器组件

class Slider{    constructor(id){        this.container=document.getElementById(id);//获取图片容器        this.items=this.container.querySelectorAll('.list-item');    }    getSelectorItem(){  //获取当前展示的图片        let selected=this.container.querySelector('.current');        return selected;    }    getSelectorItemIndex(){  //获取当前选中的图片的索引        return Array.from(this.items).indexOf(this.getSelectorItem());    }    slideTo(idx){   //跳转到idx这一张图片        let selected=this.getSelectorItem();        if(selected){            selected.className="list-item";//将当前展示的图片设置'隐藏样式'        }        let item=this.items[idx];        if(item){            item.className="current";//将要展示的图片设置'显示样式'        }    }     slideNext(){   //下一张        let currentIdx=this.getSelectorItemIndex();        let nextIdx=(currentIdx+1)%this.items.length;//防止最后一张，使其循环显示        this.slideTo(nextIdx);    }    slidePrevious(){   //上一张        let currentIdx=this.getSelectorItemIndex();        let previousIdx=(this.items.length+currentIdx-1)%this.items.length;//防止第一张，使其循环显示        this.slideTo(previousIdx);    }}//创建实例，绑定作用域let slider=new Slider('list');setInterval(slider.slideNext.bind(slider),3000);//或者setInterval(slider.slidePrevious.bind(slider),3000);

二、获取网页大小
属性：clientWidth、clientHeight、scrollWidth、scrollHeight

function getPagearea(){    if (document.compatMode == "BackCompat"){        return {            width：Math.max(document.body.scrollWidth,document.body.clientWidth),            height：Math.max(document.body.scrollHeight,document.body.clientHeight)        }    } else {        return {            width：Math.max(document.documentElement.scrollWidth,                            document.documentElement.clientWidth),            height：Math.max(document.documentElement.scrollHeight,                            document.documentElement.clientHeight)        }    }}

三、获取网页元素的【绝对位置】：元素的左上角到整张页面的左上角的距离
说明：表格和iframe框架除外，因为offsetParent未必等于父容器
属性：offsetLeft、offsetTop

function getElementLeft(element){    var actualLeft = element.offsetLeft;    var current = element.offsetParent;    while (current !== null){        actualLeft += current.offsetLeft;        current = current.offsetParent;    }    return actualLeft;}function getElementTop(element){    var actualTop = element.offsetTop;    var current = element.offsetParent;    while (current !== null){        actualTop += current.offsetTop;        current = current.offsetParent;    }    return actualTop;}

四、获取网页元素的【相对位置】：元素的左上角相对于浏览器窗口左上角的距离
说明：用绝对的距离-滚动条滚动的距离即可
属性：offsetLeft、scrollLeft、offsetTop、scrollTop

function getElementLeft(element){    var actualLeft = element.offsetLeft;    var current = element.offsetParent;    while (current !== null){        actualLeft += current.offsetLeft;        current = current.offsetParent;    }    if (document.compatMode == "BackCompat"){        var elementScrollLeft=document.body.scrollLeft;    } else {        var elementScrollLeft=document.documentElement.scrollLeft;     }    return actualLeft-elementScrollLeft;}function getElementTop(element){    var actualTop = element.offsetTop;    var current = element.offsetParent;    while (current !== null){        actualTop += current.offsetTop;        current = current.offsetParent;    }    if (document.compatMode == "BackCompat"){        var elementScrollTop=document.body.scrollTop;    } else {        var elementScrollTop=document.documentElement.scrollTop;     }    return actualTop-elementScrollTop;}

五、获取元素位置的快速方法：getBoundingClientRect()方法
说明：调用元素的getBoundingClientRect()方法，返回一个对象，含有元素的left、right、top、bottom、height、width属性
1、网页元素的相对位置：
var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;
2、网页元素的绝对位置=相对位置+滚动距离
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
六、表单的登录验证

class CheckLoginTip{    //创建错误提示    constructor(){        this.tipU=document.createElement('p');        this.tipU.appendChild(document.createTextNode('用户名不能为空！'));        this.tipP=document.createElement('p');        this.tipP.appendChild(document.createTextNode('密码格式错误！'));    }    //添加错误提示    addErrorTip(node,type){        node.className='error';        if (type==='username') {            node.parentNode.appendChild(this.tipU);        }else if (type==='password') {            node.parentNode.appendChild(this.tipP);        }    }    //移除错误提示    removeErrorTip(node,type){        node.className='';        if (type==='username') {            node.parentNode.removeChild(this.tipU);        }else if (type==='password') {            node.parentNode.removeChild(this.tipP);        }    }    //用户名是否为空    isValidName(value){        return value?false:true;    }    //验证密码    isValidPassword(password){        let len=password.length>6;//密码长度是否大于6位        let hasDigital=/\d+/.test(password);//密码是否含有数字        let hasCharater=/\w+/.test(password);//密码是否含有其他字符        return len&&hasDigital&&hasCharater;    }}实际使用：//创建表单验证实例var checkForm=new CheckLoginTip();var form=document.forms['login-form'];    var username=form['username'];   //name是关键字    var password=form['password'];     //添加表单提交事件   form.addEventListener('submit',function(e){                        if(!checkForm.isValidName(username.value)) {            checkForm.addErrorTip(username,'username');        e.preventDefault();    }        if(!checkForm.isValidPassword(password.value)) {            checkForm.addErrorTip(password,'password');        e.preventDefault();    }    }, false);    //添加表单重置事件form.addEventListener('reset',function(){    checkForm.removeErrorTip(username,'username');     checkForm.removeErrorTip(password,'password');},false);//添加用户名失去焦点事件username.addEventListener('blur',function() {        if (!checkForm.isValidName(username.value)) {            checkForm.addErrorTip(username,'username');        }  }, false);    //添加用户名获得焦点事件   username.addEventListener('focus',function() {        checkForm.removeErrorTip(username,'username');    }, false);//添加密码失去焦点事件   password.addEventListener('blur',function() {        if (!checkForm.isValidPassword(password.value)) {            checkForm.addErrorTip(password,'password');        }    }, false);    //添加密码获得焦点事件       password.addEventListener('focus',function(event) {        checkForm.removeErrorTip(password,'password');    }, false);