js常用方法总结

我就是我 2022-05-15 01:07 367阅读 0赞 
  1. //一、检测浏览器是否支持svg
  2. function isSupportSVG () {
  3.     var SVG_NS = 'http://www.w3.org/2000/svg';
  4.     return !!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect;
  5. }
  6. console.log(isSupportSVG());
  7. //二、检测浏览器是否支持canvas
  8. function isSupportCanvas () {
  9.     if ( document.createElement('canvas').getContext ) {
  10.         return true;
  11.     }
  12.     else {
  13.         return false;
  14.     }
  15. }
  16. console.log(isSupportCanvas());
  19. //三、检测是否是微信浏览器
  20. function isWeiXinClient () {
  21.     var ua = navigator.userAgent.toLowerCase();
  22.     if ( ua.match(/MicroMessenger/i) == "micromessenger" ) {
  23.         return true;
  24.     }
  25.     else {
  26.         return false;
  27.     }
  28. }
  29. alert(isWeiXinClient());
  32. //四、检测是否移动端及浏览器内核
  33. var browser = {
  34.     versions : function () {
  35.         var u = navigator.userAgent;
  36.         return {
  37.             trident : u.indexOf('Trident') > -1, //IE内核
  38.             presto : u.indexOf('Presto') > -1, //opera内核
  39.             webKit : u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
  40.             gecko : u.indexOf('Firefox') > -1, //火狐内核Gecko
  41.             mobile : !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端
  42.             ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
  43.             android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
  44.             iPhone : u.indexOf('iPhone') > -1, //iPhone
  45.             iPad : u.indexOf('iPad') > -1, //iPad
  46.             webApp : u.indexOf('Safari') > -1 //Safari
  47.         };
  48.     }
  49. };
  50. if ( browser.versions.mobile() || browser.versions.ios() || browser.versions.android() 
  51. || browser.versions.iPhone() || browser.versions.iPad() ) {
  52.     alert('移动端');
  53. }
  56. //五、检测是否电脑端 / 移动端
  57. var browser = {
  58.     versions : function () {
  59.         var u = navigator.userAgent, app = navigator.appVersion;
  60.         var sUserAgent = navigator.userAgent;
  61.         return {
  62.             trident : u.indexOf('Trident') > -1,
  63.             presto : u.indexOf('Presto') > -1,
  64.             isChrome : u.indexOf("chrome") > -1,
  65.             isSafari : !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u),
  66.             isSafari3 : !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1,
  67.             webKit : u.indexOf('AppleWebKit') > -1,
  68.             gecko : u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
  69.             mobile : !!u.match(/AppleWebKit.*Mobile.*/),
  70.             ios : !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
  71.             android : u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
  72.             iPhone : u.indexOf('iPhone') > -1,
  73.             iPad : u.indexOf('iPad') > -1,
  74.             iWinPhone : u.indexOf('Windows Phone') > -1
  75.         };
  76.     }()
  77. };
  79. if ( browser.versions.mobile || browser.versions.iWinPhone ) {
  80.     window.location = "http:/www.baidu.com/m/";
  81. }
  84. //六、检测浏览器内核
  85. function getInternet () {
  86.     if ( navigator.userAgent.indexOf("MSIE") > 0 ) {
  87.         return "MSIE";       //IE浏览器
  88.     }
  89.     if ( isFirefox = navigator.userAgent.indexOf("Firefox") > 0 ) {
  90.         return "Firefox";     //Firefox浏览器
  91.     }
  92.     if ( isSafari = navigator.userAgent.indexOf("Safari") > 0 ) {
  93.         return "Safari";      //Safan浏览器
  94.     }
  95.     if ( isCamino = navigator.userAgent.indexOf("Camino") > 0 ) {
  96.         return "Camino";   //Camino浏览器
  97.     }
  98.     if ( isMozilla = navigator.userAgent.indexOf("Gecko/") > 0 ) {
  99.         return "Gecko";    //Gecko浏览器
  100.     }
  101. }
  104. //七、强制移动端页面横屏显示
  105. $(window).on("orientationchange", function ( event ) {
  106.     if ( event.orientation == 'portrait' ) {
  107.         $('body').css('transform', 'rotate(90deg)');
  108.     }
  109.     else {
  110.         $('body').css('transform', 'rotate(0deg)');
  111.     }
  112. });
  113. $(window).orientationchange();
  116. //八、电脑端页面全屏显示
  117. function fullscreen ( element ) {
  118.     if ( element.requestFullscreen ) {
  119.         element.requestFullscreen();
  120.     }
  121.     else if ( element.mozRequestFullScreen ) {
  122.         element.mozRequestFullScreen();
  123.     }
  124.     else if ( element.webkitRequestFullscreen ) {
  125.         element.webkitRequestFullscreen();
  126.     }
  127.     else if ( element.msRequestFullscreen ) {
  128.         element.msRequestFullscreen();
  129.     }
  130. }
  131. fullscreen(document.documentElement);
  134. //九、获得 / 失去焦点
  135. //1、JavaScript实现
  136. <input id = "i_input" type = "text" value = "会员卡号/手机号" />
  137. // JavaScript
  138. window.onload = function () {
  139.     var oIpt = document.getElementById("i_input");
  140.     if ( oIpt.value == "会员卡号/手机号" ) {
  141.         oIpt.style.color = "#888";
  142.     }
  143.     else {
  144.         oIpt.style.color = "#000";
  145.     };
  146.     oIpt.onfocus = function () {
  147.         if ( this.value == "会员卡号/手机号" ) {
  148.             this.value = "";
  149.             this.style.color = "#000";
  150.             this.type = "password";
  151.         }
  152.         else {
  153.             this.style.color = "#000";
  154.         }
  155.     };
  157.     oIpt.onblur = function () {
  158.         if ( this.value == "" ) {
  159.             this.value = "会员卡号/手机号";
  160.             this.style.color = "#888";
  161.             this.type = "text";
  162.         }
  163.     };
  164. }
  166. //2、jQuery实现
  167. < input type = "text" class= "oldpsw" id = "showPwd" value = "请输入您的注册密码" / >
  168. < input type = "password" name = "psw" class= "oldpsw" id = "password" value = "" style = "display:none;" / >
  169. // jQuery
  170.     $("#showPwd").focus(function () {
  171.         var text_value = $(this).val();
  172.         if ( text_value == '请输入您的注册密码' ) {
  173.             $("#showPwd").hide();
  174.             $("#password").show().focus();
  175.         }
  176.     });
  177. $("#password").blur(function () {
  178.     var text_value = $(this).val();
  179.     if ( text_value == "" ) {
  180.         $("#showPwd").show();
  181.         $("#password").hide();
  182.     }
  183. });
  186. //十、获取上传文件大小
  187. < input type = "file" id = "filePath" onchange = "getFileSize(this)" / >
  188. // 兼容IE9低版本
  189.     function getFileSize ( obj ) {
  190.         var filesize;
  191.         if ( obj.files ) {
  192.             filesize = obj.files[ 0 ].size;
  193.         }
  194.         else {
  195.             try {
  196.                 var path, fso;
  197.                 path = document.getElementById('filePath').value;
  198.                 fso = new ActiveXObject("Scripting.FileSystemObject");
  199.                 filesize = fso.GetFile(path).size;
  200.             }
  201.             catch ( e ) {
  202.                 // 在IE9及低版本浏览器，如果不容许ActiveX控件与页面交互，点击了否，就无法获取size
  203.                 console.log(e.message); // Automation 服务器不能创建对象
  204.                 filesize = 'error'; // 无法获取
  205.             }
  206.         }
  207.         return filesize;
  208.     }
  211. //十一、限制上传文件类型
  213. //1、高版本浏览器
  214. < input type = "file" name = "filePath" accept = ".jpg,.jpeg,.doc,.docxs,.pdf" / >
  215. //2、限制图片
  216. < input type = "file" class = "file" value = "上传" accept = "image/*" >
  217. //3、低版本浏览器
  218. < input type = "file" id = "filePath" onchange = "limitTypes()" >
  219.     /* 通过扩展名，检验文件格式。
  220.      * @parma filePath{string} 文件路径
  221.      * @parma acceptFormat{Array} 允许的文件类型
  222.      * @result 返回值{Boolen}：true or false
  223.      */
  224.     function checkFormat ( filePath, acceptFormat ) {
  225.         var resultBool = false,
  226.             ex = filePath.substring(filePath.lastIndexOf('.') + 1);
  227.         ex = ex.toLowerCase();
  228.         for ( var i = 0; i < acceptFormat.length; i++ ) {
  229.             if ( acceptFormat[ i ] == ex ) {
  230.                 resultBool = true;
  231.                 break;
  232.             }
  233.         }
  234.         return resultBool;
  235.     };
  237. function limitTypes () {
  238.     var obj = document.getElementById('filePath');
  239.     var path = obj.value;
  240.     var result = checkFormat(path, [ 'bmp', 'jpg', 'jpeg', 'png' ]);
  241.     if ( !result ) {
  242.         alert('上传类型错误，请重新上传');
  243.         obj.value = '';
  244.     }
  245. }
  248. //十二、正则表达式
  249. //验证邮箱
  250. /^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
  252. //验证手机号
  253. /^1[3|5|8|7]\d{9}$/
  255. //验证URL
  256. /^http:\/\/.+\./
  258. //验证身份证号码
  259. /(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
  261. //匹配字母、数字、中文字符
  262. /^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
  264. //匹配中文字符
  265. /[\u4e00-\u9fa5]/
  267. //匹配双字节字符(包括汉字)
  268. /[^\x00-\xff]/
  271. //十三、限制字符数
  272. <input id="txt" type="text">
  273. //字符串截取
  274.     function getByteVal ( val, max ) {
  275.         var returnValue = '';
  276.         var byteValLen = 0;
  277.         for ( var i = 0; i < val.length; i++ ) {
  278.             if ( val[ i ].match(/[^\x00-\xff]/ig) != null ) byteValLen += 2;
  279.             else byteValLen += 1;
  280.             if ( byteValLen > max ) break;
  281.             returnValue += val[ i ];
  282.         }
  283.         return returnValue;
  284.     };
  286. $('#txt').on('keyup', function () {
  287.     var val = this.value;
  288.     if ( val.replace(/[^\x00-\xff]/g, "**").length > 14 ) {
  289.         this.value = getByteVal(val, 14);
  290.     }
  291. });
  294. //十四、验证码倒计时
  295. <input id="send" type="button" value="发送验证码">
  296. // JavaScript
  297. var times = 60, // 时间设置60秒
  298.     timer = null;
  299. document.getElementById('send').onclick = function () {
  300.     // 计时开始
  301.     timer = setInterval(function () {
  302.         times--;
  303.         if ( times <= 0 ) {
  304.             send.value = '发送验证码';
  305.             clearInterval(timer);
  306.             send.disabled = false;
  307.             times = 60;
  308.         }
  309.         else {
  310.             send.value = times + '秒后重试';
  311.             send.disabled = true;
  312.         }
  313.     }, 1000);
  314. };
  316. var times = 60,
  317.     timer = null;
  318. $('#send').on('click', function () {
  319.     var $this = $(this);
  320.     // 计时开始
  321.     timer = setInterval(function () {
  322.         times--;
  323.         if ( times <= 0 ) {
  324.             $this.val('发送验证码');
  325.             clearInterval(timer);
  326.             $this.attr('disabled', false);
  327.             times = 60;
  328.         }
  329.         else {
  330.             $this.val(times + '秒后重试');
  331.             $this.attr('disabled', true);
  332.         }
  333.     }, 1000);
  334. });
  337. //十五、时间倒计时
  338. <p id="_lefttime"></p>
  339. var times = 60,timer = null;
  343. //十六、倒计时跳转
  344. <div id="showtimes"></div>
  345. // 设置倒计时秒数
  346. var t = 10;
  347. // 显示倒计时秒数
  348. function showTime () {
  349.     t -= 1;
  350.     document.getElementById('showtimes').innerHTML = t;
  351.     if ( t == 0 ) {
  352.         location.href = 'error404.asp';
  353.     }
  354.     //每秒执行一次 showTime()
  355.     setTimeout("showTime()", 1000);
  356. }
  357. showTime();
  360. //十七、时间戳、毫秒格式化
  361. function formatDate ( now ) {
  362.     var y = now.getFullYear();
  363.     var m = now.getMonth() + 1; // 注意 JavaScript 月份+1
  364.     var d = now.getDate();
  365.     var h = now.getHours();
  366.     var m = now.getMinutes();
  367.     var s = now.getSeconds();
  368.     return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
  369. }
  371. var nowDate = new Date(1442978789184);
  372. alert(formatDate(nowDate));
  375. //十八、当前日期
  376. var calculateDate = function () {
  377.     var date = new Date();
  378.     var weeks = [ "日", "一", "二", "三", "四", "五", "六" ];
  379.     return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" +
  380.         date.getDate() + "日 星期" + weeks[ date.getDay() ];
  381. };
  382. $(function () {
  383.     $("#dateSpan").html(calculateDate());
  384. });
  387. //十九、判断周六 / 周日
  388. <p id = "text" > < / p >
  389.     function time ( y, m ) {
  390.         var tempTime = new Date(y, m, 0);
  391.         var time = new Date();
  392.         var saturday = new Array();
  393.         var sunday = new Array();
  395.         for ( var i = 1; i <= tempTime.getDate(); i++ ) {
  396.             time.setFullYear(y, m - 1, i);
  397.             var day = time.getDay();
  398.             if ( day == 6 ) {
  399.                 saturday.push(i);
  400.             }
  401.             else if ( day == 0 ) {
  402.                 sunday.push(i);
  403.             }
  404.         }
  405.         var text = y + "年" + m + "月份" + "<br />"
  406.             + "周六：" + saturday.toString() + "<br />"
  407.             + "周日：" + sunday.toString();
  408.         document.getElementById("text").innerHTML = text;
  409.     };
  410. time(2018, 5);

三十、AJAX调用错误处理

当 Ajax 调用返回 404 或 500 错误时，就执行错误处理程序。如果没有定义处理程序，其他的 jQuery 代码或会就此罢工。定义一个全局的 Ajax 错误处理程序

format_png

三十一、链式插件调用

jQuery 允许“链式”插件的方法调用，以减轻反复查询 DOM 并创建多个 jQuery 对象的过程。

format_png 1

通过使用链式，可以改善

format_png 2

还有一种方法是在（前缀$）变量中高速缓存元素

format_png 3

链式和高速缓存的方法都是 jQuery 中可以让代码变得更短和更快的最佳做法。

20191229112121499.png

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70

发表评论

表情：
评论列表 （有 0 条评论，367人围观）

还没有评论，来说两句吧...

相关阅读

    相关 常用方法总结

    关于es6中的函数 发现在日常工作中也是常用项，但是老是记不住，老要百度，特总结一下 判断是否包含 此方法不仅对 字符串生效，同样对数组也生效，对象数组不生效（仅为测试

    灰太狼灰太狼/ 0 赞/ 363 阅读