JavaScript中值得收藏的示例代码

这篇文章将为大家详细讲解有关JavaScript中值得收藏的示例代码，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

鄞州网站建设公司创新互联公司,鄞州网站设计制作，有大型网站制作公司丰富经验。已为鄞州近千家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱，请找那个售后服务好的鄞州做网站的公司定做！

跨浏览器事件

跨浏览器添加事件

//跨浏览器添加事件
    function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }else if(obj.attachEvent){//IE
            obj.attchEvent('on'+type,fn);
        }
    }

跨浏览器移除事件

//跨浏览器移除事件
function removeEvent(obj,type,fn){
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,false);
    }else if(obj.detachEvent){//兼容IE
        obj.detachEvent('on'+type,fn);
    }
}

跨浏览器阻止默认行为

//跨浏览器阻止默认行为
    function preDef(ev){
        var e = ev || window.event;
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue =false;
        }
    }

跨浏览器获取目标对象

//跨浏览器获取目标对象
function getTarget(ev){
    if(ev.target){//w3c
        return ev.target;
    }else if(window.event.srcElement){//IE
        return window.event.srcElement;
    }
}

跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置，sp == scroll position
    function getSP(){
        return{
            top: document.documentElement.scrollTop || document.body.scrollTop,
            left : document.documentElement.scrollLeft || document.body.scrollLeft;
        }
    }

跨浏览器获取可视窗口大小

 //跨浏览器获取可视窗口大小
          function  getWindow () {
            if(typeof window.innerWidth !='undefined') {
                return{
                    width : window.innerWidth,
                    height : window.innerHeight
                }

            } else{
                return {
                    width : document.documentElement.clientWidth,
                    height : document.documentElement.clientHeight
                }
            }
        },

js 对象冒充

    function Person(name , age){
        this.name = name ;
        this.age = age ;
        this.say = function (){
            return "name : "+ this.name + " age: "+this.age ;
        } ;
    }

    var o = new Object() ;//可以简化为Object()
    Person.call(o , "zhangsan" , 20) ;
    console.log(o.say() );//name : zhangsan age: 20

js 异步加载和同步加载

异步加载也叫非阻塞模式加载，浏览器在下载js的同时，同时还会执行后续的页面处理。
在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了：

(function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = 'http://yourdomain.com/script.js';
    var x = document.getElementsByTagName('script')[0];
     x.parentNode.insertBefore(s, x);
})();

同步加载

平常默认用的都是同步加载。如：

同步模式又称阻塞模式，会阻止流览器的后续处理。停止了后续的文件的解析，执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。

通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。同步加载流程是瀑布模型，异步加载流程是并发模型。

js获取屏幕坐标

    
    
    
    



    function mousePosition(ev){
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop - document.body.clientTop
        };
    }
    function mouseMove(ev){
        ev = ev || window.event;
        var mousePos = mousePosition(ev);
        document.getElementById('xxx').value = mousePos.x;
        document.getElementById('yyy').value = mousePos.y;
    }
    document.onmousemove = mouseMove;

X: Y:

注释：
1、documentElement 属性可返回文档的根节点。

2、scrollTop() 为滚动条向下移动的距离

3、document.documentElement.scrollTop 指的是滚动条的垂直坐标

4、document.documentElement.clientHeight 指的是浏览器可见区域高度

DTD已声明的情况下：

如果在页面中添加这行标记的话

IE

• document.body.clientWidth ==> BODY对象宽度

• document.body.clientHeight ==> BODY对象高度

• document.documentElement.clientWidth ==> 可见区域宽度

• document.documentElement.clientHeight ==> 可见区域高度

Firefox

• document.documentElement.scrollHeight ==> 浏览器所有内容高度

• document.body.scrollHeight ==> 浏览器所有内容高度

• document.documentElement.scrollTop ==> 浏览器滚动部分高度

• document.body.scrollTop ==>始终为0

• document.documentElement.clientHeight ==>浏览器可视部分高度

• document.body.clientHeight ==> 浏览器所有内容高度

Chrome

• document.documentElement.scrollHeight ==> 浏览器所有内容高度

• document.body.scrollHeight ==> 浏览器所有内容高度

• document.documentElement.scrollTop==> 始终为0

• document.body.scrollTop==>浏览器滚动部分高度

• document.documentElement.clientHeight ==> 浏览器可视部分高度

• document.body.clientHeight ==> 浏览器所有内容高度

js拖拽效果

    
    
    
        #login{
            height: 100px;
            width: 100px;
            border: 1px solid black;
            position: relative;
            top:200px;
            left: 200px;
            background: red;
        }