原生javascript封裝的函數

1.javascript 加載的函數

window.onload = function(){}

2.封裝的id函數

    function $(id) {
        return document.getElementById(id);
    }
    
    //調用 $("id")

3.封裝的數組id

    function $arr(array) {
        return document.getElementsByTagName(array);
    }
    
    //調用 $arr("數組")

4.自定義平均值函數

    function avg(array) {
        var sum = 0;
        var len = array.length;
        for (var i = 0; i < len; i++) {
            sum += array[i];
        }
        return sum / len;
    }

5.全選取消

    function all(flag) {
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = flag;
        }
    }

6.封裝的類函數

//【主流瀏覽器(谷歌,火狐,IE9以上的包括IE9)都支持document.getElementsByClassName()函數,IE678不支持】

    function getClass(classname, id) {
//                主流瀏覽器帶id
        if (document.getElementsByClassName) {
            if (id) {
                var eleId = document.getElementById(id);
                return eleId.getElementsByClassName(classname);
            }
//                不帶id
            else {
                return document.getElementsByClassName(classname);
            }
        }

//                IE678瀏覽器 帶id
        if (id) {
            var eleId = document.getElementById(id);
            var dom = eleId.getElementsByTagName("*");
        }
//                不帶id
        else {
            var dom = document.getElementsByTagName("*");
        }
        var arr = [];
        for (var i = 0; i < arr.length; i++) {
            var txtarr = dom[i].className.split(" ");
            for (var j = 0; j < txtarr.length; j++) {
                if (txtarr.className == classname) {
                    arr.push(dom[j]);
                }
            }
        }
    }

7.顯示函數

    function show(obj) {
        obj.style.display = "block";
    }
    
    //調用  show(id)

8.隱藏函數

    function hide(obj) {
        obj.style.display = "none";
    }

9.封裝的id和類函數

    function getClass(classname, id) {
//                主流瀏覽器帶id
        if (document.getElementsByClassName) {
            if (id) {
                var eleId = document.getElementById(id);
                return eleId.getElementsByClassName(classname);
            }
//                不帶id
            else {
                return document.getElementsByClassName(classname);
            }
        }

//                IE678瀏覽器 帶id
        if (id) {
            var eleId = document.getElementById(id);
            var dom = eleId.getElementsByTagName("*");
        }
//                不帶id
        else {
            var dom = document.getElementsByTagName("*");
        }
        var arr = [];
        for (var i = 0; i < arr.length; i++) {
            var txtarr = dom[i].className.split(" ");
            for (var j = 0; j < txtarr.length; j++) {
                if (txtarr.className == classname) {
                    arr.push(dom[j]);
                }
            }
        }
    }

    function $(str) {
        var s = str.charAt(0);
        var ss = str.substr(1);
        switch (s) {
            case "#":
                return document.getElementById(ss);
                break;
            case ".":
                return getClass(ss);
                break;
            default :
                return document.getElementsByTagName(str);
        }
    }

10.封裝的scollTop函數

    function scroll() {
//        支持IE9+ 和其餘主流瀏覽器
        if (window.pageYOffset != null) {
            return {
                left: window.pageXOffset,
                top: window.pageYOffset
            }
        }
//       聲明瞭DTD
//        檢測是否是怪異模式的瀏覽器,就是沒有聲明<!DOCTYPE html>
        else if (document.compatMode == "CSS1Compat") {
            return {
//               document.documentElement就是document.html的意思 ,可是沒有documen.html寫法,谷歌不支持這個
                left: document.documentElement.scrollLeft,
                top: document.documentElement.scrollTop
            }
        }
//        剩下的確定就是怪異模式的
        return {
            left: document.body.scrollLeft,
            top: document.body.scrollTop
        }
    }

    //    調用
    window.onscroll = function () {
//        scroll().top 就是仿json的寫法
        console.log(scorll().top);
    }

11.封裝的可視區域大小的函數

     function client() {
        if (window.innerWidth != null)  // ie9 +  最新瀏覽器
        {
            return {
                width: window.innerWidth,
                height: window.innerHeight
            }
        }
        else if (document.compatMode === "CSS1Compat")  // 標準瀏覽器
        {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
        return {   // 怪異瀏覽器
            width: document.body.clientWidth,
            height: document.body.clientHeight

        }
    }

12.阻止冒泡

//事件冒泡: 當一個元素上的事件被觸發的時候,好比說鼠標點擊了一個按鈕,一樣的事件將會在那個元素的全部祖先元素中被觸發。這一過程被稱爲事件冒泡;這個事件從原始元素開始一直冒泡到DOM樹的最上層。
順序
IE 6.0: 
div -> body -> html -> document
其餘瀏覽器: 
div -> body -> html -> document -> window

不是全部的事件都能冒泡。如下事件不冒泡:blur、focus、load、unload

//阻止冒泡
e ? e.stopPropagation() : window.event.cancelBubble = true;

13.勻速動畫

    function animate(obj, target) {
        clearInterval(obj.timer);  // 先清除定時器
        var speed = obj.offsetLeft < target ? 15 : -15;  // 用來判斷 應該 +  仍是 -
        obj.timer = setInterval(function () {
            var result = target - obj.offsetLeft; // 由於他們的差值不會超過5
            obj.style.left = obj.offsetLeft + speed + "px";
            if (Math.abs(result) <= 15)  // 若是差值不小於 5 說明到位置了
            {
                clearInterval(obj.timer);
                obj.style.left = target + "px";  // 有5像素差距   咱們直接跳轉目標位置
            }
        }, 10)
    }

14.緩動動畫

    function slowanimate(obj, target) {
        clearInterval(obj.timer);
//        定義步長
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            obj.style.left = obj.offsetLeft + step + "px";
            if (target == obj.offsetLeft) {
                clearInterval(obj.timer);
            }
        }, 30);
    }

15.封裝的得到CSS樣式的函數

    function getStyle(obj, attr) {
//        IE瀏覽器 全部IE
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        }
        else {
//            w3c 瀏覽器
            return window.getComputedStyle(obj, null)[attr];
        }
    }

    //調用  getStyle(demo,"width")  注意:屬性必須寫引號

16.封裝運動框架的單個屬性

    function slowanimate(obj, attr, target) {
//                動畫原理 盒子自己的樣式 + 步長
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var current = parseInt(getStyle(obj, attr));
            var step = (target - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            obj.style[attr] = current + step + "px";
            if (current == target) {
                clearInterval(obj.timer);
            }
        }, 30);
    }

17.封裝運動框架的多個屬性

    function slowanimate(obj, json) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            for (var attr in json) {
                var current = parseInt(getStyle(obj, attr));
                var step = (json[attr] - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                obj.style[attr] = current + step + "px";
            }
        }, 30);
    }

18.封裝運動框架的多個屬性 帶回調函數、透明度、層級

    function animate(obj, json, fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var flag = true;
            for (var attr in json) {
                var current = 0;
                if (attr == "opacity") {
                    current = Math.round(parseInt(getStyle(obj, attr) * 100)) || 0;
                }
                else {
                    current = parseInt(getStyle(obj, attr));
                }

                var step = (json[attr] - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
//                判斷透明度
                if (attr == "opacity") {
//                    主流瀏覽器
                    if ("opacity" in json) {
                        obj.style.opacity = (current + step) / 100;
                    }
//                    IE瀏覽器
                    else {
                        obj.style.filter = "alpha(opacity = " + (current + step) * 10 + ")";
                    }
                }
                else if (attr == "zIndex") {
                    obj.style.zIndex = json[attr];
                }
                else {
                    obj.style[attr] = current + step + "px";
                }
                if (current != json[attr]) {
                    flag = false;
                }
            }
            if (flag) {
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            }
        }, 30);
    }
    
    
    //調用animate(box,{width:200,left:400,height:800,opacity:30,zIndex:3}, function () {}); 

19.js原生手機滑動手勢

    //返回角度
    function GetSlideAngle(dx, dy) {
        return Math.atan2(dy, dx) * 180 / Math.PI;
    }

    //根據起點和終點返回方向 1:向上,2:向下,3:向左,4:向右,0:未滑動
    function GetSlideDirection(startX, startY, endX, endY) {
        var dy = startY - endY;
        var dx = endX - startX;
        varresult = 0;

        //若是滑動距離過短
        if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
            return result;
        }

        var angle = GetSlideAngle(dx, dy);
        if (angle >= -45 && angle < 45) {
            result = 4;
        } else if (angle >= 45 && angle < 135) {
            result = 1;
        } else if (angle >= -135 && angle < -45) {
            result = 2;
        }
        else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
            result = 3;
        }

        return result;

20.檢測字符長度(包含中英文)

   //若是直接用str.length  會把中文也按照一個字符來計算,但是一箇中文應該佔兩個字符,因此封裝這個函數
   
   function getStringLength(str) {
        // 存儲字符的總長度
        var len = 0;
        // 存儲每個編碼
        var c = 0;
        for (var i = 0; i < str.length; i++) {
            c = txt.charCodeAt(i);
            if (c >= 0 && c <= 127) {
                len++;
            }
            else {
                len += 2;
            }
        }
        // 返回字符長度
        return len;
    }

21.自制滾動條

    //首先計算滾動條的高度
    // 動態計算滾動條的告訴  滾動條高度/容器的高度 = 容器的高度 / 內容的高度
    bar.style.height = box.offsetHeight * box.offsetHeight / content.offsetHeight + "px";
    //obj 滾動條  target 內容盒子
    function startScroll(obj, target) {
        obj.onmousedown = function (event) {
            var event = event || window.event;
            var y = event.clientY - this.offsetTop;
            var that = this;
            document.onmousemove = function (event) {
                var event = event || window.event;
                // 滾動條的的top
                var barTop = event.clientY - y;
                // 內容盒子的高度 = (大盒子高度-內容盒子的高度)/(滾動盒子的高度 - 滾動條的高度)* 滾動條的top值
                var contentTop = (target.offsetHeight - target.parentNode.offsetHeight) / (target.parentNode.offsetHeight - that.offsetHeight) * barTop;
                if (barTop <= 0) {
                    barTop = 0;
                } else if (barTop >= target.parentNode.offsetHeight - that.offsetHeight) {
                    barTop = target.parentNode.offsetHeight - that.offsetHeight + "px";
                } else {
                    target.style.top = -contentTop + "px";
                }
                that.style.top = barTop + "px";
                window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();   // 防止拖動滑塊的時候,選中文字
            }
        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }

22.階乘(遞歸算法)

    function factorial(i) {
        if (i > 1) {
            return factorial(i - 1) * i;
        } else {
            return 1;
        }
    }
//調用  factorial(5)  5!

23.倒計時

  function showTime(obj) {
        var box = document.querySelector(obj);
        var ms = new Date("2018/2/11").getTime()- new Date().getTime();
        var day = parseInt(ms/1000/3600/24);
        var hour = Math.floor(ms/1000/3600%24);
        var minute = parseInt(ms/1000/60%60);
        var second = parseInt(ms/1000%60);
        hour >= 10 ? hour : hour = "0" + hour;
        minute >= 10 ? minute : minute = "0" + minute;
        second >= 10 ? second : second = "0" + second;
        box.innerHTML = "距離放假還有"+day+"天"+hour+"小時"+minute+"分"+second+"秒";
    }

24.針對數組的升序降序排列

 //針對數組sort()方法的排序
 var arr = [4, 12, 36, 76, 21, 9, 19, 42];
 //升序    
	 //第一種   
   function asc(a,b){       
      return a-b;  
   }   
	 //調用    console.log(arr.sort(asc));     
 	//第二種   
    var res =arr.sort(function (a,b){
  	  return a-b;    
    })    
    
//降序   
    //第一種   
    function desc(a,b){       
    	return b-a;
    }    
    console.log(arr.sort(desc)); 
    //第二種    
    var res = arr.sort(function(a,b)){  
    	return b-a;
    }   
    
 //若是爲 sortfunction 參數提供了一個函數,那麼該函數必須返回下列值之一: 
	負值,若是所傳遞的第一個參數比第二個參數小。 
		負值:就不換位置
	零,若是兩個參數相等。 
	正值,若是第一個參數比第二個參數大。
		正值:就換位置

25.針對數組的累加求和

arr.reduce(function(total,current,index,arr){
  return total+current;
})

26.正則驗證身份證

//身份證號驗證正則
function validateIdCard(idCard){
	//15位和18位身份證號碼的正則表達式
	var regIdCard=/^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;

	//若是經過該驗證,說明身份證格式正確,但準確性還需計算
	if(regIdCard.test(idCard)){
	   if(idCard.length==18){
		   var idCardWi=new Array( 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ); //將前17位加權因子保存在數組裏

		   var idCardY=new Array( 1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2 ); //這是除以11後,可能產生的11位餘數、驗證碼,也保存成數組

		   var idCardWiSum=0; //用來保存前17位各自乖以加權因子後的總和
		   for(var i=0;i<17;i++){
           		idCardWiSum+=idCard.substring(i,i+1)*idCardWi[i];
           }

		  var idCardMod=idCardWiSum%11;//計算出校驗碼所在數組的位置

		  var idCardLast=idCard.substring(17);//獲得最後一位身份證號碼


		  //若是等於2,則說明校驗碼是10,身份證號碼最後一位應該是X
		   if(idCardMod==2){
			   if(idCardLast=="X"||idCardLast=="x"){
				   return true;
			   }else{
				   return false;
			   }
		   }else{
			   //用計算出的驗證碼與最後一位身份證號碼匹配,若是一致,說明經過,不然是無效的身份證號碼
			   if(idCardLast==idCardY[idCardMod]){
				   return true;
			   }else{
				   return false;
			   }
		   }
	   }
	}else{
	   return false;
	}
}

26.驗證京東密碼

// 驗證密碼
    function testPwd(obj){
        // 一種組合
        // 純數字組合
        var numReg = /^\d{6,20}$/;
        // 純字母組合
        var letterReg = /^[a-zA-Z]{6,20}$/;
        // 純英文字符組合
        var charReg = /^[`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
        // 純中文字符組合
        var zhCharReg = /^[?,。《》]{3,10}$/;
        // 純漢字組合
        var wordReg = /^[\u4e00-\u9fa5]{6,20}$/;

        // 兩種組合
        // 數字和字母兩種組合
        var twoReg = /^[0-9a-zA-Z]{6,20}$/;
        // 數字和英文字符組合
        var nlReg = /^[\d`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
        // 數字和中文字符組合
        var nzReg = /^[\d?,。《》]{6,20}$/;
        // 數字和中文漢字組合
        var nwReg = /^[\d\u4e00-\u9fa5]{6,20}$/;
        // 字母和純英文字符組合
        var lcReg = /^[a-zA-Z`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
        // 字母和中文字符組合
        var lzReg = /^[a-zA-Z?,。《》]{6,20}$/;
        // 字母和中文漢字
        var lwReg = /^[a-zA-Z\u4e00-\u9fa5]{6,20}$/;
        // 英文字符和中文字符組合
        var czReg = /^[?,。《》`~\!\|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
        // 英文字符和中文漢字
        var cwReg = /^[\u4e00-\u9fa5\`~!|@#\$%\^&*()_\-\+\/=、<>'",\?\;]{6,20}$/;
        // 中文字符和中文漢字
        var zwReg = /^[\u4e00-\u9fa5\^[?,。《》]{6,20}$/;

        if (numReg.test(obj) == true || letterReg.test(obj) == true || charReg.test(obj) == true || zhCharReg.test(obj) || wordReg.test(obj)) {
            alert("有被盜風險,建議使用字母、數字和符號兩種及以上組合");
        } else if (twoReg.test(obj) == true || nlReg.test(obj) == true || nzReg.test(obj) == true || nwReg.test(obj) == true || lcReg.test(obj) == true || lzReg.test(obj) == true || lwReg.test(obj) == true || czReg.test(obj) == true || cwReg.test(obj) == true || zwReg.test(obj) == true) {
            alert("安全強度適中,可使用三種以上的組合來提升安全強度");
        } else if (obj.length >= 6) {
            alert("你的密碼安全");
        } else {
            alert("請覈對輸入");
        }
    }

27.利用正則替換路徑問題

/*
    * 需求:給圖片的src地址前面增長爲assets
    *
    * 1. 將須要匹配的內容原封不動的寫入正則表達式
    * 2. 將改變的內容替換爲.*?
    * 3. 將.*?添加(),目的是爲了可以將src中的內容單獨匹配一次做爲匹配結果
    * 4.經過replace將內容替換
    *   content.replace(reg,'<img src="assets/$1" alt="">')
    * */
<body>
	<ul>
   	    <li class="images"><a href="1.html"><img class="a" src="images/1.jpg" alt="134534"></a></li>
    	<li><a href="2.html"><img src="images/2.jpg" alt="asdfas2"></a></li>
   		<li><a href="3.htlm"><img src="images/3.jpg" class="b" alt="3asdf"></a></li>
    	<li><a href="4.html"><img src="images/4.jpg" alt="45asdf4"></a></li>
   	    <li><a href="5.html"><img src="images/5.jpg" alt="zxcv5" title="abc"></a></li>
	</ul>
</body>

<script>
	//1。獲取ul對象
    var ul = document.querySelector('ul');
    // 2.獲取ul的文本內容,此時就是獲取出來ul裏全部的內容
    var content = ul.innerHTML;
    // 3.寫正則表達式,先把須要改變的地址原封不動拿過來
    // <img src="images/3.jpg" class="b" alt="3asdf">把不同地方用(.*?)替換,以下
    // .匹配的是非空字符*匹配任意數量?拒絕貪婪,匹配任意數量的非空字符,若是不加?,就會匹配到最後
    var reg = /<img(.*?)src="(.*?)"(.*?)>/g;
    var result = content.replace(reg,'<img$1src="assets/$2"$3>')
    console.log(result);
</script>

28.去除數組中的重複值,打印出不重複的元素

    function unique(arr) {
        // 定義一個空數組,用來存放不重複的值
        var newArr = [];
        // 遍歷原數組
        for (var i = 0; i < arr.length; i++) {
            // 若是新數組裏查找原數組 ,由於查找不到indexOf的值爲-1,若是查找不到就把原數組的值放到新數組中
            if (newArr.indexOf(arr[i]) == -1) {
                newArr.push(arr[i]);
            }
        }
        return newArr;
    }

29.獲取url地址的後綴名

    var str = "https://www.baidu.com/index.php?tn=78040160_40_pg";
    兩種方法:任選其一
    // 數組拆分
	function getURLtype(str){
        var arr = str.split(".");
        var arr1 = arr[arr.length - 1].split("?");
        console.log(arr1[0]);
    }
	//輸出php
	
    // lastIndexOf
    function getURLtype(str) {
        var index = str.lastIndexOf(".");
        var index2 = str.indexOf("?");
        console.log(str.slice(index, index2));
    }
    //輸出.php

30.字符串轉換爲對象

    function strToObj(str) {
        // 定義一個空對象
        var obj = {};
        // 切割字符串爲數組
        var arr = str.split("; ");
        // 遍歷數組
        arr.forEach(function (value, key) {
            // 獲取第一個等號出現的位置
            var index = arr[key].indexOf("=");
            // 以等號切割
            var res = arr[key].split(/[=]/);
            obj[res[0]] = arr[key].slice(index + 1);
        })
        console.log(obj);
    }

31.查找字符串的每一個字符在字符串出現的次數,從小到大輸出

    function strCount(str) {
        var obj = {};
        for (var i = 0; i < str.length; i++) {
            if (obj[str[i]]) {
                //obj[str[i]] 是對象的一種形式,也就是obj[str[0]] 就是obj['a']=obj.a,在str中查找obj.a  obj.b 等等,若是找到 就+1,找不到就是1
                obj[str[i]]++;
            } else {
                obj[str[i]] = 1;
            }
        }
        // 獲取object.keys   ["1", "2", "a", "b", "d", "e"]
        var num = Object.keys(obj).sort(function (a,b) {
//        obj[a]  obj.1 就是次數
            return obj[a]-obj[b];
        });

		var newObj = {};
   		for (var item in num) {
       		 newObj[num[item]] = obj[num[item]];
  	    }
  	    return newObj;
    }

32.全選,取消全選,反選

    // 全選
    function allSelect(obj, input) {
        obj.onclick = function () {
            input.forEach(function (value, key) {
                input[key].checked = true;
            })
        }
    }

    // 取消全選
    function cancelSelect(obj, input) {
        obj.onclick = function () {
            input.forEach(function (value, key) {
                input[key].checked = false;
            })
        }
    }

    // 反選
    function reverseSelect(obj, input) {
        obj.onclick = function () {
            input.forEach(function (value, key) {
                if (input[key].checked){
                    input[key].checked = false;
                } else {
                    input[key].checked = true;
                }
            })
        }
    }

33.添加類名、刪除類名(移除類名)

    // 添加類名
    function addClass(obj, className) {
        // 獲取對象的類名,而且去掉兩邊空格 以防class = "     box      "的狀況
        var oldClass = obj.className.trim();
        // 把獲取到的對象的類名以空格的形式拆分爲數組,指定的形式能夠是正則表達式,/\s+/ \s是匹配到空格,+最少匹配一個,以防頁面中有多個空格
        var classArr = oldClass.split(/\s+/);
        // 在拆分後的數組中查找要傳進來的類名,經過索引值,若是索引值爲-1,就查找不到
        if (classArr.indexOf(className) == -1) {
            // 找不到須要添加的類型的話,就把這個類名添加到數組中
            classArr.push(className);
            // 而後把添加類名的對象的類名的數組形式轉換爲字符串,此時obj.className中的className 不是形參,而是類名
            obj.className = classArr.join(' ');
        }
    }

    // 移除類名
    function removeClass(obj, className) {
        var oldClass = obj.className.trim();
        var classArr = oldClass.split(/\s+/);
        // 在拆分後的數組若是找到了須要移除的類名,那麼就移除這個類名
        if (classArr.indexOf(className) != -1) {
            classArr.splice(classArr.indexOf(className), 1);
            obj.className = classArr.join(' ');
        }
    }

34.放大鏡效果

    /*
    * 功能:實現電商網站放大鏡效果
    * @param Object box: 放大鏡最大盒子的容器
    * @param Object small: 放小圖片的小盒子
    * @param Object smallImg: 小盒子的圖片
    * @param Object shadow: 鼠標遮罩的陰影層
    * @param Object big: 裝放大圖片的盒子
    * @param Object bigImg: 放大的圖片
    * */
    function magnifier(box, small, smallImg, shadow, big, bigImg) {
        // 鼠標移入小盒子,顯示陰影放大鏡盒子
        small.onmouseenter = function () {
            shadow.style.display = "block";
            big.style.display = "block";

            // 設置陰影盒子的寬高陰影盒子的寬高,不是隨便給的
            // 陰影盒子的寬高/small盒子的寬高 應該等於 big盒子的寬高(不能包含邊框 ,因此用clientWidth  由於offsetWidth包含寬高)/ bigImg的寬高,他們是等比例關係 也就是x/450 = 540/800
            shadow.style.width = small.offsetWidth * big.clientWidth / bigImg.offsetWidth + "px";
            shadow.style.height = small.offsetWidth * big.clientWidth / bigImg.offsetWidth + "px";

            // 移動陰影,由於只有在進入small盒子是,才能夠移動,因此在這裏出發移動事件
            small.onmousemove = function (ent) {
                var e = ent || window.event;
                /*
                * 讓鼠標一直保持在陰影盒子的中間,因此鼠標的起始位置就是陰影盒子的寬高的一半
                * 陰影的left/top值= 鼠標距離頁面的距離 - 小盒子距離頁面的距離 - 陰影盒子自身(寬高)的一半
                * */
                // 此時沒有small盒子的offsetLeft  是由於offsetLeft屬性是距離有定位的祖輩盒子的距離,由於small的父級盒子box相對定位,因此small.offsetLeft 永遠都爲0,由於box和small盒子同樣大,因此用box.offsetLeft

                // 爲了避免讓陰影盒子超出邊界,須要判斷一下,
                var left = e.pageX - box.offsetLeft - shadow.offsetWidth / 2;
                if (left < 0) {
                    left = 0;
                } else if (left > box.offsetWidth - shadow.offsetWidth) {
                    left = box.offsetWidth - shadow.offsetWidth;
                }

                var top = e.pageY - box.offsetTop - shadow.offsetHeight / 2;
                if (top < 0) {
                    top = 0;
                } else if (top > box.offsetWidth - shadow.offsetWidth) {
                    top = box.offsetWidth - shadow.offsetWidth;
                }

                shadow.style.left = left + "px";
                shadow.style.top = top + "px";

                // 上面都是計算出陰影的移動,下面計算出放大鏡的右側盒子移動的部分
                /*
                * 放大鏡應該是等比例縮放的,small盒子的寬高450,放大鏡圖片的是800
                * 右側盒子和左側盒子的比例就是800/450,假如 左側鼠標的座標位置是(100,100),若是他們是二倍關係,那麼右側盒子圖片的座標就是應該(100*2,100*2)
                * 因此右側盒子圖片的left,top值就應該是(左側left*800/450,左側top*800/450)
                * 因爲右側是盒子裏麪包含一個特別大的圖片,圖片的內容也超出右側盒子的距離,能夠用big.scrollTop(Left) 來設置座標
                * */
                big.scrollTop = top * bigImg.offsetHeight / smallImg.offsetWidth;
                big.scrollLeft = left * bigImg.offsetHeight / smallImg.offsetWidth;
            }
        }
        // 鼠標離開小盒子,繼續隱藏
        small.onmouseleave = function () {
            shadow.style.display = "none";
            big.style.display = "none";
        }
    };

35.添加移除綁定事件

/*
* 添加綁定事件
* @param Object obj:綁定的事件對象
* @param String eventName:綁定的事件名稱
* @param function callback:綁定事件執行的函數
* */
function addEvent(obj, eventName, callback) {
    if (obj.addEventListener) {
        obj.addEventListener(eventName, callback, false);
    } else {
        obj.attachEvent('on' + eventName, callback);
    }
}

/*
* 移除綁定事件
* @param Object obj:移除綁定的事件對象
* @param String eventName:移除綁定的事件名稱
* @param function callback:移除綁定事件執行的函數
* */
function removeEvent(obj, eventName, callback) {
    if (obj.removeEventListener) {
        obj.removeEventListener(eventName, callback, false);
    } else {
        obj.detachEvent('on' + eventName, callback);
    }
}

36.獲取樣式

    /*
    * 獲取樣式
    * @param Object obj獲取樣式的對象
    * @param Object attr:獲取的css樣式名稱
    * return 獲取樣式的值
    * */
    function getStyle(obj, attr) {
        return document.defaultView ? document.defaultView.getComputedStyle(obj, null)[attr] : obj.currentStyle[attr];
    }
    // 調用,須要給attr加引號
    console.log(getStyle(box, 'backgroundColor'));
    主流瀏覽器獲取的顏色都轉換成rgb值,IE8獲取的是style樣式裏面寫的屬性值,寫什麼就是什麼

37.阻止默認行爲

e ?e.preventDefault() : window.event.returnValue = false;e ?e.preventDefault() : window.event.returnValue = false;

38.移動端視口

function getFontSize() {
    // 定義html的字體大小
    var htmlFontSize = 16;
    // 以iphone6爲準 設置窗口寬度
    var cw = 375;
    // 獲取新窗口的可視寬度
    var newCw = document.documentElement.clientWidth || document.body.clientWidth;
    // 獲取新窗口的字體大小
    var newHtmlFontSize = newCw * htmlFontSize / cw;
    document.documentElement.style.fontSize = newHtmlFontSize + 'px';
}
相關文章
相關標籤/搜索