分享原生JavaScript技巧大收集(61~70)

浏览:1044 发布日期:2013年08月16日分类:前端开发关键字: javascript js技巧 js代码片段

.
文章来源:jquery教程 - http://www.jq-school.com/Show.aspx?id=308
.
最近边写jquery 代码,边搜集一些常用、实用的原生javascript实用代码片段,不知不觉又整理了70多个了,希望对大家有帮助,会不断的增加的,大家继续关注哦。。。

61、原生javascript解决offsetX兼容性问题

// 针对火狐不支持offsetX/Y

function getOffset(e){

 var target = e.target, // 当前触发的目标对象

   eventCoord,

   pageCoord,

   offsetCoord;



 // 计算当前触发元素到文档的距离

 pageCoord = getPageCoord(target);



 // 计算光标到文档的距离

 eventCoord = {

  X : window.pageXOffset + e.clientX,

  Y : window.pageYOffset + e.clientY

 };



 // 相减获取光标到第一个定位的父元素的坐标

 offsetCoord = {

  X : eventCoord.X - pageCoord.X,

  Y : eventCoord.Y - pageCoord.Y

 };

 return offsetCoord;

}



function getPageCoord(element){

 var coord = { X : 0, Y : 0 };

 // 计算从当前触发元素到根节点为止,

 // 各级 offsetParent 元素的 offsetLeft 或 offsetTop 值之和

 while (element){

  coord.X += element.offsetLeft;

  coord.Y += element.offsetTop;

  element = element.offsetParent;

 }

 return coord;

}

62、原生javascript常用的正则表达式

//正整数

/^[0-9]*[1-9][0-9]*$/;

//负整数

/^-[0-9]*[1-9][0-9]*$/;

//正浮点数

/^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$/;  

//负浮点数

/^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; 

//浮点数

/^(-?\d+)(\.\d+)?$/;

//email地址

/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;

//url地址

/^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$/;

//年/月/日(年-月-日、年.月.日)

/^(19|20)\d\d[- /.](0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])$/;

//匹配中文字符

/[\u4e00-\u9fa5]/;

//匹配帐号是否合法(字母开头,允许5-10字节,允许字母数字下划线)

/^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;

//匹配空白行的正则表达式

/\n\s*\r/;

//匹配中国邮政编码

/[1-9]\d{5}(?!\d)/;

//匹配身份证

/\d{15}|\d{18}/;

//匹配国内电话号码

/(\d{3}-|\d{4}-)?(\d{8}|\d{7})?/;

//匹配IP地址

/((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;

//匹配首尾空白字符的正则表达式

/^\s*|\s*$/;

//匹配HTML标记的正则表达式

< (\S*?)[^>]*>.*?|< .*? />;

63、原生javascript实现返回顶部的通用方法

function backTop(btnId) {

    var btn = document.getElementById(btnId);

    var d = document.documentElement;

    var b = document.body;

    window.onscroll = set;

    btn.style.display = "none";

    btn.onclick = function() {

        btn.style.display = "none";

        window.onscroll = null;

        this.timer = setInterval(function() {

            d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);

            b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);

            if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);

        },

        10);

    };

    function set() {

        btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"

    }

};

backTop('goTop');

64、原生javascript获得URL中GET参数值

// 用法:如果地址是 test.htm?t1=1&t2=2&t3=3, 那么能取得:GET["t1"], GET["t2"], GET["t3"]

function get_get(){ 

 querystr = window.location.href.split("?")

 if(querystr[1]){

  GETs = querystr[1].split("&")

  GET =new Array()

  for(i=0;i<GETs.length;i++){

   tmp_arr = GETs.split("=")

   key=tmp_arr[0]

   GET[key] = tmp_arr[1]

  }

 }

 return querystr[1];

}

65、原生javascript实现全选通用方法

function checkall(form, prefix, checkall) {

    var checkall = checkall ? checkall : 'chkall';

    for(var i = 0; i < form.elements.length; i++) {

        var e = form.elements;

        if(e.type=="checkbox"){

            e.checked = form.elements[checkall].checked;

        }

    }

}

66、原生javascript实现全部取消选择通用方法

function uncheckAll(form) {

    for (var i=0;i<form.elements.length;i++){

        var e = form.elements;

        if (e.name != 'chkall')

        e.checked=!e.checked;

    }

}

67、原生javascript实现打开一个窗体通用方法

function openWindow(url,windowName,width,height){

  var x = parseInt(screen.width / 2.0) - (width / 2.0); 

  var y = parseInt(screen.height / 2.0) - (height / 2.0);

  var isMSIE= (navigator.appName == "Microsoft Internet Explorer");

  if (isMSIE) {

      var p = "resizable=1,location=no,scrollbars=no,width=";

      p = p+width;

      p = p+",height=";

      p = p+height;

      p = p+",left=";

      p = p+x;

      p = p+",top=";

      p = p+y;

    retval = window.open(url, windowName, p);

  } else {

    var win = window.open(url, "ZyiisPopup", "top=" + y + ",left=" + x + ",scrollbars=" + scrollbars + ",dialog=yes,modal=yes,width=" + width + ",height=" + height + ",resizable=no" );

    eval("try { win.resizeTo(width, height); } catch(e) { }");

    win.focus();

  }

}

68、原生javascript判断是否为客户端设备

function client(o){    

    var b = navigator.userAgent.toLowerCase();  

      var t = false;

      if (o == 'isOP'){

             t = b.indexOf('opera') > -1;

      }

      if (o == 'isIE'){

             t = b.indexOf('msie') > -1;

      }

      if (o == 'isFF'){

             t = b.indexOf('firefox') > -1;

      }

    return t;

}

69、原生javascript获取单选按钮的值

function get_radio_value(field){

    if(field&&field.length){    

        for(var i=0;i<field.length;i++){        

            if(field.checked){            

                return field.value;                                

            }            

        }        

    }else {        

        return ;                

    }    

}

70、原生javascript获取复选框的值

function get_checkbox_value(field){    

    if(field&&field.length){    

        for(var i=0;i<field.length;i++){            

            if(field.checked && !field.disabled){

                return field.value;

            }

        }        

    }else {

        return;

    }            

}

最佳答案

评论() 相关

后面还有条评论,

您需要登录后才可以评论登录 | 立即注册

koor 10-22
Vue3都使用Proxy了,你更应该了解Proxy
执着〃々 08-02
thinkphp学习交流群
执着〃々 07-28
微信公众平台开发,小程序开发,php程序开发,模板下载,学习资料分...
vogbase 02-09
PHP相关视频教程(从前端到后端到实战30套)免费分享给大家
zhushichuan 01-08
tp5接收数据

收藏

赞

jqueryschool

积分:458 等级:LV2

热点推荐

(追記) (追記ここまで)

最新更新

我们

合作

网站

信息

ThinkPHP 是一个免费开源的,快速、简单的面向对象的轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。