资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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;
        }



    var oDiv = document.getElementById("login");     oDiv.onmousedown = function(e){         var e = e || window.event;         //window.event兼容IE,当事件发生时有效         var diffX = e.clientX - oDiv.offsetLeft;         //获取鼠标点击的位置到所选对象的边框的水平距离         var diffY = e.clientY - oDiv.offsetTop;         document.onmousemove = function(e){          //需设为document对象才能作用于整个文档             var e = e||window.event;             oDiv.style.left = e.clientX - diffX + 'px';             //style.left表示所选对象的边框到浏览器左侧距离             oDiv.style.top = e.clientY -diffY + 'px';         };         document.onmouseup = function(){             document.onmousemove = null;             //清除鼠标释放时的对象移动方法             document.onmouseup = null;         }     }  

offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

js获取图片原始大小尺寸

var img = $("#img_id"); // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

js循环遍历数组

遍历二维数组

  

阻止表单重复提交

有两种方法可以解决:一是提交之后,立刻禁用点击按钮;第二种就是提交之后取消后续的表单提交操作。

document.getElementById("btn").disabled = true;//第一次提交后,将按钮禁用

这种方式只能用于通过提交按钮防止重复提交,还可以使用如下方式:

var flag = false;//设置一个监听变量
if(flag ==true)return;//退出事件
flag = true;//表示提交过一次了

字符串部分

在字符串中查找子字符串


    var test = 'Welcome to my blog!';
    var value = 'blog';
    var subValue = test.indexOf(value);
    console.log(subValue);//14,子字符串的索引

Number和Math部分

数字可以是一个直接量,也可以是一个对象,但是Math对象不同,他没有构造函数,并且其所有的属性和方法都是直接通过这个对象来访问的

把十进制转化为一个十六进制值

var num = 255;
console.log(num.toString(16));//ff

js中,十进制数字以0x开头,八进制数字总是以0开头

随机产生颜色


    function randomVal(val){
        return Math.floor(Math.random()*(val + 1));
    }

    function randomColor(){
        return 'rgb(' + randomVal(255) + ',' + randomVal(255) + ',' + randomVal(255) + ')';
    }

目前,所有浏览器都支持RGB表示法和十六进制表示法,除了IE7,它只支持十六进制表示法

在角度和弧度之间转换

var rad = degrees*(Math.PI/180);
var degrees = rad*(180/Math.PI);

数组部分

创建多维数组


    var arrayLength = 3;//设置数组长度

    //创建数组
    var multiArray = new Array(arrayLength);
    for(var i =0;i

排序数组


     var fruits = ['banana','apple','orange','strawberry'];
    console.log(fruits.sort());//Array [ "apple", "banana", "orange", "strawberry" ]

    var num = [32,43,2,5,-23,0,4];
    console.log(num.sort());//Array [ -23, 0, 2, 32, 4, 43, 5 ]

Array对象的sort方法会按照字母顺序来排序数组元素。对于数字,是按照字符编码的顺序进行排序

function compare(a,b){
    return a-b;
}
var num = [32,43,2,5,-23,0,4];
console.log(num.sort(compare));//Array [ -23, 0, 2, 4, 5, 32, 43 ]

Date日期时间部分

js计算时间差

var date1=new Date();  //开始时间,当前时间

var date2=new Date(); //结束时间,需传入时间参数
var date3=date2.getTime()-date1.getTime();  //时间差的毫秒数

//计算出相差天数
var days=Math.floor(date3/(24*3600*1000));

//计算出小时数
var leave1=date3%(24*3600*1000);    //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000);        //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));


//计算相差秒数
var leave3=leave2%(60*1000);      //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000);

console.log(" 相差 "+days+"天 "+hours+"小时 "+minutes+" 分钟"+seconds+" 秒");

正则部分

js实现千分位分隔


    function cc(s){
        if(/[^0-9\.]/.test(s)) return "invalid value";
        s=s.replace(/^(\d*)$/,"$1.");
        s=(s+"00").replace(/(\d*\.\d\d)\d*/,"$1");
        s=s.replace(".",",");
        var re=/(\d)(\d{3},)/;
        while(re.test(s))
            s=s.replace(re,"$1,$2");
        s=s.replace(/,(\d\d)$/,".$1");
        return "¥" + s.replace(/^\./,"0.")
    }

js判断传入参数是否为质数

function fn(input) {
  input = parseInt(input,10);
  return isPrime(input) ? 'is prime' : 'not prime';
}

function isPrime(input) {
  if (input < 2) {
    return false;
  } else {
    for (var i = 2; i <= Math.sqrt(input); i++) {
      if (input % i == 0) {
        return false;
      }
    }
  }
  return true;
}

js判断字符串出现最多的字符,并统计次数

//js实现一个函数,来判断一个字符串出现次数最多的字符,并统计这个次数

    function countStr(str){
        var obj = {};
        for(var i = 0, l = str.length,k; i < l ;i++){
            k = str.charAt(i);
            if(obj[k]){
                obj[k]++;
            }else{
                obj[k] = 1;
            }
        }
        var m = 0,i=null;
        for(var k in obj){
            if(obj[k] > m){
                m = obj[k];
                i = k;
            }
        }
        return i + ':' + m;
    }

关于“JavaScript中值得收藏的示例代码”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


分享题目:JavaScript中值得收藏的示例代码
浏览地址:http://cdkjz.cn/article/jpogej.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220