做有态度的前端团队

网易FEG前端团队

常用js汇总

这里收集了一些常用的js代码,拿出来跟大家分享

  • 判断图片是否加载完
    有时候你可能需要检查图像是否已经加载完成,以便继续执行相应的js代码
function loadImage1(url,callback){
  var img = new Image();
  img.onload = function(){
        //图片加载完成后执行的操作
  }
  img.src = url;
}
  • 图片按某个尺寸等比缩放
 function img1(picW,picH,maxWidth,maxHeight){
    var Ratio,
        wRatio = maxWidth / picW,
        hRatio = maxHeight / picH;
    if(wRatio < 1 || hRatio < 1){
      Ratio = Math.min(wRatio, hRatio);
      picW = picW * Ratio;
      picH = picH * Ratio;
    }
  }
  • addEventListener的兼容写法
function addEventListener(dom, type, fn) {
  if (dom.addEventListener){
    dom.addEventListener(type, fn, false);
  }
  else if (dom.attachEvent) {
    dom.attachEvent( "on"+type, fn);
  }
};
  • 回到顶部按钮
    利用jQuery里的animate和scrollTop方法,便不需要使用插件创建简单的滚动到顶部动画
$('.top').click(function(e){
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});
  • 禁用输入
    有时你可能需要用表单的提交按钮或者某个输入框直到用户执行了某个动作(比如:检查“我已阅读条款”复选框)。在你的输入框上设置disabled属性
$('input[type="submit"]').prop('disabled', true);
$('input[type="submit"]').prop('disabled', false);

当你需要的时候,只是需要再次运行prop方法,设置值是true,启用该属性

$('input[type="submit"]').prop('disabled', true);
  • 判断网页是否在微信中被调用
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
}else {
    alert("调用失败,请用微信扫一扫,扫描下面二维码打开网页!");
}
  • onselectstart
    使用js禁止用户选中网页上的内容,IE及Chrome下的方法一样。
    使用onselectstart,例如
<body onselectstart="return false">

Firefox

body {-moz-user-select: none; }

IE

body{gn:expression_r(this.onselectstart=function(){return false;})}


1、onselectstart事件不被input和textarea标签支持,而onselect事件只被input和textarea支持。
2、Firefox/Opera不支持onselectstart事件Firefox中可以使用CSS "-moz-user-select:none"属性来禁止文本选定

PS
如果用了这句代码:

document.onselectstart = function(event) {return false;}

那么页面上的所有的选择事件将失效。解决的办法:可以指定哪些是不能选定的,

document.onselectstart= function(event){return test();}
function test(){
    var the = event.srcElement ;
    if( !( ( the.tagName== "INPUT" && the.type.toLowerCase() == "text" ) || the.tagName== "TEXTAREA" ) ){
        return false;
    }
    return true;
}

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif