web前端常用的封装方法

最新推荐文章于 2023-02-17 19:45:39 发布

qq_45670012

最新推荐文章于 2023-02-17 19:45:39 发布

阅读量857

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hhhjai2jbkaa&title=web%E5%89%8D%E7%AB%AF%E5%B8%B8%E7%94%A8%E7%9A%84%E5%B0%81%E8%A3%85%E6%96%B9%E6%B3%95

版权

前端专栏收录该内容

1223 篇文章 6 订阅

订阅专栏

1、放大镜


        //页面加载完毕后执行
        window.onload = function () {

            var oDemo = document.getElementById('demo');
            var oMark = document.getElementById('mark');
            var FloatBox = document.getElementById('float-box');
            var SmallBox = document.getElementById("small-box");
            var bigBox = document.getElementById('big-box');
            var bigImg = bigBox.getElementsByTagName('img')[0];

            oMark.onmouseover = function (){
                FloatBox.style.display = "block";
                bigBox.style.display = "block";
            }

            oMark.onmouseout = function (){
                FloatBox.style.display = "none";
                bigBox.style.display = "none";
            }

            oMark.onmousemove = function (ev){

                var ev = ev || window.event;
                var left = ev.clientX - oDemo.offsetLeft - SmallBox.offsetLeft - FloatBox.offsetWidth / 2;
                var top = ev.clientY - oDemo.offsetTop - SmallBox.offsetTop - FloatBox.offsetHeight / 2;

                if(left &lt; 10){

                    left = 0;

                }else if(left &gt;= oMark.offsetWidth - FloatBox.offsetWidth - 10){

                    left = oMark.offsetWidth - FloatBox.offsetWidth;

                }

                if(top &lt; 10){

                    top = 0;

                }else if(top &gt;= oMark.offsetHeight - FloatBox.offsetHeight - 10){

                    top = oMark.offsetHeight - FloatBox.offsetHeight;

                }

                FloatBox.style.left = left   "px";
                FloatBox.style.top = top   "px";

                var scaleX = left / (oMark.offsetWidth - FloatBox.offsetWidth);
                var scaleY = top / (oMark.offsetHeight - FloatBox.offsetHeight);

                bigImg.style.left = -scaleX * (bigImg.offsetWidth - bigBox.offsetWidth)   "px";
                bigImg.style.top = -scaleY * (bigImg.offsetHeight - bigBox.offsetHeight)   "px";

            }

        }

2、JSONP


        function fn1(data){
            var html = '';
            var oUl = document.getElementsByTagName('ul')[0];

            console.log(data);

            if(data.total != -1){
                for(var i=0; i&lt;data.books.length; i  ){
    
                    html  = '&lt;li&gt;&lt;h2&gt;'  data.books[i].title  '&lt;/h2&gt; &lt;span&gt;'  data.books[i].author_intro  '&lt;/span&gt;&lt;img src="'  data.books[i].image  '" /&gt;&lt;p&gt;'  data.books[i].summary  '&lt;/p&gt; &lt;div&gt;&lt;em&gt;'   data.books[i].publisher   '&lt;/em&gt;&lt;/div&gt;&lt;/li&gt;';
    
                }
    
                oUl.innerHTML = html;
            
            }else{
                document.body.innerHTML ='&lt;h2&gt;亲~~ 没有数据哦~~~&lt;/h2&gt;';
            }
            
        }
    
    window.onload = function (){
        
        var oBtn = document.getElementById('btn');
        var iNow = 0;
        oBtn.onclick = function (){
            //动态添加 script 标签   加载URL地址 后传入 callback=fn1 输出一个函数, 在上面则定义好这个函数, 接受一个data 就是资源  json类型,循环输出, 可先console.log(dara) 查看数据
            var oScript = document.createElement('script');
            
            oScript.src="https://api.douban.com/v2/book/search?q=校园&amp;count=10&amp;start="  iNow  "&amp;callback=fn1";
            document.head.appendChild(oScript);
            
            // 点击一次 10，从多少开始获取
            iNow  = 10;
        
        }
            
    }

3、获取指定区间范围随机数，包括lowerValue和upperValue


function randomFrom(lowerValue,upperValue)
{
    return Math.floor(Math.random() * (upperValue - lowerValue   1)   lowerValue);
}
//如获取1-100之间的随机数
console.log(randomFrom(1,100));

4、数组排序



1、快速排序
    
    /** 
     *   得到中间那位那位数,然后循环判断, arr[i] &lt; 中间数 则push leftArr, 否则push rightArr, 最后返回 left数组 '拼接' 中间数   right数组 
     */
    function sort(arr){
    
        if(arr.length &lt;= 1){
            return arr;
        }
    
        var numIndex = Math.floor(arr.length/2);
        var numVal = arr.splice(numIndex,1);
        var leftArr = [];
        var rightArr = [];
    
        for(var i=0; i&lt;arr.length; i  ){
    
            if(arr[i]&lt;numVal){  
                leftArr.push(arr[i]);
            }else{
                rightArr.push(arr[i])
            }
    
        }
    
        return sort(leftArr).concat(numVal,sort(rightArr));

    }

2、sort排序
    var num=[7,45,100,4,2,564];
    num.sort(function (a, b){
        return a - b;
    });
    console.log(num)  //[2, 4, 7, 45, 100, 564]

5、数组去重


1、indexOf 去重

/**
 *   当arr的第一次出现的位置 == i  则是第一次出现就push到tempArr
 */
function unique(arr){

    if (arr.length &lt;= 1){
        return arr;
    }

    var tempArr = [];

    for(var i=0; i&lt;arr.length; i  ){

        if(tempArr.indexOf(parseInt(arr[i])) == -1){        //-1 证明没有出现过

            tempArr.push(arr[i]);

        }

    }

    return tempArr;

}

2、Set去重
function SetUnique(array) {
  return [...new Set(array)];
}
dedupe([1, 1, 2, 3]) // [1, 2, 3]

6、深度拷贝


/** 
 *     深度拷贝
 *     使用for in 在循环赋值，避免对象引用
 */
function copy(obj){

    if(typeof obj != 'object'){
        return obj;
    }

    var newObj = {};

    for(var attr in obj){

        newObj[attr] = copy(obj[attr]);

    }

    return newObj;

}

原文地址：https://segmentfault.com/a/1190000016677097

更多专业前端知识，请上【猿2048】www.mk2048.com