javaScript函数封装

本篇封装了一些常用的函数，兼容IE8及以下的浏览器，怪异模式。

按需加载loadScript（）、绑定事件处理函数addEvet()、查看滚动尺寸getScrollOffset()、查看可视区窗口尺寸getViewportOffset()、返回计算样式getStyle()、获取事件源对象getEventScr(e)、判断类型type()、取消冒泡stopBubble()、深度克隆deepClone()、阻止默认事件cancelHandler()、字节长度排序retBytes()、拖拽方块drag()

按需加载loadScript（）

方法一：函数传入一个匿名函数，在该函数参数传入需要执行的参数

 1         function loadScript(url,callback){
 2             var script=document.createElement('script');
 3             script.type='text/javascript';
 4             if(script.readyState){
 5                 script.onreadystatechange=function (){
 6                     if(script.readyState=='complete'||script.readyState=='loaded'){
 7                         callback();
 8                     }
 9                 }
10             }else{
11                 script.onload=function (){
12                     callback();
13                 }
14             }//先启动监听事件后下载
15             script.src=url;
16             document.head.appendChild(script);
17         }
18 
19 
20         //执行函数需注意
21         loadScript('demo.js',function(){test()});

方法二：参数传入字符串形式

function loadScript(url,callback){
            var script=document.createElement('script');
            script.type='text/javascript';
            if(script.readyState){
                script.onreadystatechange=function (){
                    if(script.readyState=='complete'||script.readyState=='loaded'){
                        eval(callback);
                    }
                }
            }else{
                script.onload=function (){
                    eval(callback);;
                }
            }//先启动监听事件后下载
            script.src=url;
            document.head.appendChild(script);
        }

        //执行函数需注意参数传入字符串形式
        loadScript('demo.js','test()');

方法三：适合传入一个tools工具库，执行工具库中的某个函数

function loadScript(url,callback){
            var script=document.createElement('script');
            script.type='text/javascript';
            if(script.readyState){
                script.onreadystatechange=function (){
                    if(script.readyState=='complete'||script.readyState=='loaded'){
                        tools[callback]();
                    }
                }
            }else{
                script.onload=function (){
                    tools[callback]();
                }
            }//先启动监听事件后下载
            script.src=url;
            document.head.appendChild(script);
        }

        //执行函数需注意参数传入字符串形式
        loadScript('demo.js','test');

最后的封装：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12         //按需加载 执行js函数
13         function loadScript(url, callback) {
14             var script = document.createElement('script');
15             script.type = 'text/javascript';
16             //ie浏览器监测的方法
17             if (script.readyState) {
18                 script.onreadystatechange = function () {
19                     if (script.readyState == 'complete' || script.readyState == 'loaded') {
20                         callback();
21                     }
22                 }
23             } else {
24                 //chrome、Firefox、Safari、Opera浏览器的方法
25                 script.onload = function () {
26                     callback();
27                 }
28             }
29             script.src = url;//先绑定监测的事件，再加载URL。假设下载速度比电脑运行还快的情况
30             document.head.appendChild(script);
31         }
32 // 分界线--------------------------------
33 //执行需注意url是字符串。函数需传一个匿名函数包裹该test()进去，因为代码未加载就解析test会报错
34 
35 /*        loadScript('demo.js',function(){
36             test();
37         });
38 */
39     </script>
40 
41 
42 </body>
43 
44 </html>

绑定事件处理函数addEvet()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <div style=" 100px;height: 100px;background: red;"></div>
12 
13     <script type="text/javascript">
14 
15         // 给一个dom对象(elem)添加该事件类型(type)的处理函数(handle)
16         function addEvent(elem, type, handle) {
17             //兼容非ie9以下浏览器
18             if (elem.addEventListener) {
19                 elem.addEventListener(type, handle, false);
20             } else if (elem.attachEvent) {
21                 //兼容ie浏览器
22                 elem.attachEvent('on' + type, function () {
23                     handle.call(elem);
24                 })
25             } else {
26                 //兼容性很好
27                 elem['on' + type] = handle;
28             }
29         }
30 
31 
32 
33         //分界线------------------------------------------------
34         var div = document.getElementsByTagName('div')[0];
35         addEvent(div, 'click', test);
36         function test() {
37             console.log("a");
38         }
39 
40 
41 
42     </script>
43 
44 
45 </body>
46 
47 </html>

查看滚动尺寸getScrollOffset()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <!-- br*100 显示滚动条-->
10     
11     <script type="text/javascript">
12 
13         function getScrollOffset() {
14             if (window.pageXOffset) {
15                 return {
16                     x: window.pageXOffset,
17                     y: window.pageYOffset
18                 }
19             } else {
20                 //兼容ie8及ie8以下
21                 return {
22                     x: document.body.scrollLeft + document.documentElement.scrollLeft,
23                     y: document.body.scrollTop + document.documentElement.scrollTop
24                 }
25             }
26         }
27 
28     </script>
29 </body>
30 
31 </html>

查看可视区窗口尺寸getViewportOffset()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <script type="text/javascript">

        function getViewportOffset() {
            //兼容非ie浏览器
            if (window.innerWidth) {
                w: window.innerWidth,
                    h : window.innerHeight
            } else {
                //兼容怪异模式
                if (document.compatMode == "BackCompat") {
                    return {
                        w: document.body.clientWidth,
                        h: document.body.clientHight
                    }
                } else {
                    //兼容标准模式 ie浏览器
                    return {
                        w: document.documentElement.clientWidth,
                        h: document.documentElement.clientHight
                    }
                }
            }
        }

    </script>


</body>

</html>

返回计算样式getStyle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style=" 100px;height:100px;background: red;"></div>
    <script type="text/javascript">

        function getStyle(elem,prop){
            //兼容非ie8及以下浏览器
            if(window.getComputedStyle){
                return window.getComputedStyle(elem,null)[prop]; //null可以放伪元素 但是这里没有做伪元素兼容
            }else{
            //兼容ie浏览器
                return elem.currentStyle[prop];
            }
        }

    </script>


</body>
</html>

获取事件源对象getEventScr(e)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10     <div style=" 100px;height: 100px;background: red;"></div>
11     <script type="text/javascript">
12 
13         function getEventScr(e) {
14             var event = e || window.event;//兼容ie
15             var target = event.target || event.scrEvent;//event.target兼容火狐、event.scrEvent兼容ie。Chrome两兼容
16             console.log(target);
17         }
18 
19 
20         //分界线-------------------------------------
21         var div = document.getElementsByTagName('div')[0];
22         div.onclick = function (e) {
23             getEventScr(e);
24         }
25 
26     </script>
27 
28 
29 </body>
30 
31 </html>

判断类型type()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12 
13         function type(target) {
14             var template = {
15                 "[object Array]": "array",
16                 "[object Object]": "object",
17                 "[object Number]": "number-object",
18                 "[object Boolean]": "boolean-object",
19                 "[object String]": "string-object"
20             }
21 
22             //1.分两类 原始值 引用值
23             //2.区分引用值
24             if (target == null) {
25                 return null;
26             }
27             if (typeof (target) == 'object') {
28                 //数组
29                 //对象
30                 //包装类 Object.prototype.toString
31                 var str = Object.prototype.toString.call(target);//属性名
32                 return template[str];//属性值
33             } else {
34                 return typeof (target);//原始值 和 function
35             }
36         }
37 
38 
39     </script>
40 
41 
42 
43 </body>
44 
45 </html>

取消冒泡stopBubble()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <script type="text/javascript">

        function stopBubble(event) {
            //兼容非ie9以下浏览器
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                //兼容ie浏览器
                event.cancelBubble = true;
            }
        }

    </script>


</body>

</html>

深度克隆deepClone()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12 
13         function deepClone(origin, target) {
14             var target = target || {},
15                 toStr = Object.prototype.toString,
16                 arrStr = "[object Array]";
17             for (var prop in origin) {
18                 if (origin.hasOwnProperty(prop)) {
19                     if (origin[prop] !== "null" && typeof (origin[prop]) == 'object') {
20                         if (toStr.call(origin[prop]) == arrStr) {
21                             target[prop] = [];
22                         } else {
23                             target[prop] = {};
24                         }
25                         deepClone(origin[prop], target[prop]);
26                     } else {
27                         target[prop] = origin[prop]
28                     }
29                 }
30             }
31             return target;
32         };
33 
34 
35         // 以下为界限
36         var obj = {
37             name: "liang",
38             age: 18,
39             son: {
40                 name: "hua",
41                 age: 11,
42                 arr: [1, 2, 3]
43             }
44         };
45 
46 
47     </script>
48 
49 
50 </body>
51 
52 </html>

阻止默认事件cancelHandler()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12 
13         function cancelHandler(event) {
14             // 兼容非ie浏览器
15             if (event.preventDefault) {
16                 event.preventDefault();
17             } else {
18                 // 兼容ie浏览器
19                 event.returnValue = false;
20             }
21         }
22 
23         //分界线-------------------------------------
24         document.oncontextmenu = function (e) {
25             console.log(e);
26             cancelHandler(e);
27         }
28 
29     </script>
30 
31 
32 
33 </body>
34 
35 </html>

字节长度排序retBytes()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <script type="text/javascript">
12 
13         function retBytes(str) {
14             var num = len = str.length;
15             for (var i = 0; i < len; i++) {
16                 if (str.charCodeAt(i) > 255) {
17                     num++;
18                 }
19             }
20             return num;
21         }
22         var arr = ['a邓', 'bbbbden邓哥过', 'ddddnkkjkdjfkffhhaf'];
23         arr.sort(function (a, b) {
24             return retBytes(a) - retBytes(b);
25         });
26 
27     </script>
28 </body>
29 
30 </html>

拖拽方块drag()

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Document</title>
 7 </head>
 8 
 9 <body>
10 
11     <div style="100px;height:100px;background-color:red;position:absolute;left:0;top:0;border-radius: 50%"></div>
12 
13     <script type="text/javascript">
14 
15         var div = document.getElementsByTagName('div')[0];
16 
17         function drag(elem) {
18             elem.onmousedown = function (e) {
19                 var event = e || window.event;
20                 disX = event.pageX - parseInt(elem.style.left);
21                 disY = event.pageY - parseInt(elem.style.top);
22                 document.onmousemove = function (e) {
23                     var event = e || window.event;
24                     elem.style.left = event.pageX - disX + "px";
25                     elem.style.top = event.pageY - disY + "px";
26                 }
27                 document.onmouseup = function () {
28                     document.onmousemove = null;
29                 }
30             }
31         }
32 
33 
34         drag(div);
35 
36     </script>
37 
38 </body>
39 
40 </html>

时钟定时器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         input{
 8             border:1px solid rgba(0,0,0,0.8);
 9             text-align: right;
10             font-size: 18px;
11             font-weight: bold;
12         }
13 
14     </style>
15 </head>
16 <body>
17 
18     minutes:<input type="text" value="0">
19     seconds:<input type="text" value="0">
20 
21 <script type="text/javascript">
22     var minutesNode=document.getElementsByTagName('input')[0];
23     var secondsNode=document.getElementsByTagName('input')[1];
24     var    minutes=0,
25         seconds=0;
26     var timer=setInterval(function(){
27         seconds++;
28         if(seconds==60){
29             seconds=0;
30             minutes++;
31         }
32         secondsNode.value=seconds;
33         minutesNode.value=minutes;
34         if(minutes==3){
35             clearInterval(timer);
36         }
37 
38     },10);
39     
40 </script>
41 
42 
43 </body>
44 </html>

仿新搜索框

<input type="text" style="color: #999;position: relative;" onfocus="if(this.value=='请输入用户名') {this.value=''; this.style.color='#424242'}" onblur="if (this.value=='') {this.value='请输入用户名'; this.style.color='#999'}" value="请输入用户名">

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .inp-txt {
            color: #666;
            border: #ff8400 solid 1px;
        }

        .submit-second-btn {
            background: #ff8400;
            border: 0;
        }
    </style>
</head>

<body>


    <input type="text" maxlength="40" value="请输入关键字" name="SerchKey" class="inp-txt" onfocus="if(this.value=='请输入关键字'){this.value='';this.className='inp-txt inp-txt-active'}"
     onblur="if(this.value==''){this.value='请输入关键字';this.className='inp-txt'}" autocomplete="off">
    <input type="submit" name="SearchSubButton" class="submit-second-btn" value="搜索" onmouseover="this.className='submit-second-btn submit-second-btn-hover'"
     onmouseout="this.className='submit-second-btn'" suda-uatrack="key=index_new_search&amp;value=search_click">


</body>

</html>