欢迎您光临深圳塔灯网络科技有限公司！
电话图标 余先生：13699882642

网站百科

为您解码网站建设的点点滴滴

首页  >   > 网站建设知识 > 建站知识 > 企业建站知识
企业建站知识 推广知识 小程序 微信营销 APP开发 前端设计 MindManager 开发语言 自媒体

分享前端开发常用代码片段-值得收藏

发表日期：2018-11 文章编辑：小灯 浏览次数：1277

一、预加载图像

如果你的网页中需要使用大量初始不可见的（例如，悬停的）图像，那么可以预加载这些图像。

二、检查图像是否加载

有时为了继续脚本，你可能需要检查图像是否全部加载完毕。

你也可以使用 ID 或 CLASS 替换 <img>标签来检查某个特定的图像是否被加载。

三、自动修复破坏的图像

逐个替换已经破坏的图像链接是非常痛苦的。不过，下面这段简单的代码可以帮助你。

四、悬停切换

当用户鼠标悬停在可点击的元素上时，可添加类到元素中，反之则移除类。

只需要添加必要的 CSS 即可。更简单的方法是使用 toggleClass() 方法。

五、淡入淡出/显示隐藏

六、鼠标滚轮

$('#content').on("mousewheel DOMMouseScroll", function (event) {// chrome & ie || // firefox var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) ||(event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));if (delta > 0) {console.log('mousewheel top'); } else if (delta < 0) { console.log('mousewheel bottom'); }});

七、鼠标坐标

1、JavaScript实现

X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /> 
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;

2、jQuery实现

$('#ele').click(function(event){ //获取鼠标在图片上的坐标console.log('X：' + event.offsetX+'\n Y:' + event.offsetY); //获取元素相对于页面的坐标console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top); });

八、禁止移动端浏览器页面滚动

1、HTML实现

<body ontouchmove="event.preventDefault()" >

2、JavaScript实现

document.addEventListener('touchmove', function(event) { event.preventDefault(); });

九、阻止默认行为

// JavaScript document.getElementById('btn').addEventListener('click', function (event) { event = event || window.event；if (event.preventDefault){ // W3C event.preventDefault(); } else{ // IE event.returnValue = false; } }, false);// jQuery $('#btn').on('click', function (event) { event.preventDefault(); });

十、阻止冒泡

// JavaScript document.getElementById('btn').addEventListener('click', function (event) { event = event || window.event；if (event.stopPropagation){ // W3C event.stopPropagation(); } else{ // IE event.cancelBubble = true; } }, false);// jQuery $('#btn').on('click', function (event) { event.stopPropagation(); });

十一、检测浏览器是否支持svg

function isSupportSVG() {var SVG_NS = 'http://www.w3.org/2000/svg'; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;} console.log(isSupportSVG());

十二、检测浏览器是否支持canvas

function isSupportCanvas() { if(document.createElement('canvas').getContext){ return true; }else{ return false; } }console.log(isSupportCanvas());

十三、检测是否是微信浏览器

function isWeiXinClient() { var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i)=="micromessenger") {return true;} else {return false;} }alert(isWeiXinClient());

十四、检测是否移动端及浏览器内核

var browser = {versions: function() {var u = navigator.userAgent;return {trident: u.indexOf('Trident') > -1, //IE内核presto: u.indexOf('Presto') > -1, //opera内核webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核gecko: u.indexOf('Firefox') > -1, //火狐内核Geckomobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移动终端ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //iosandroid: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //androidiPhone: u.indexOf('iPhone') > -1 , //iPhoneiPad: u.indexOf('iPad') > -1, //iPadwebApp: u.indexOf('Safari') > -1 //Safari};} } if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {alert('移动端');}

十五、检测是否电脑端/移动端

var browser={versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; var sUserAgent = navigator.userAgent; return { trident: u.indexOf('Trident') > -1, presto: u.indexOf('Presto') > -1,isChrome: u.indexOf("chrome") > -1,isSafari: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u), isSafari3: !u.indexOf("chrome") > -1 && (/webkit|khtml/).test(u) && u.indexOf('webkit/5') != -1, webKit: u.indexOf('AppleWebKit') > -1,gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, mobile: !!u.match(/AppleWebKit.*Mobile.*/),ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, iPhone: u.indexOf('iPhone') > -1,iPad: u.indexOf('iPad') > -1, iWinPhone: u.indexOf('Windows Phone') > -1 }; }() } if(browser.versions.mobile || browser.versions.iWinPhone){ window.location = "http:/www.baidu.com/m/"; }

十六、检测浏览器内核

function getInternet(){ if(navigator.userAgent.indexOf("MSIE")>0) { return "MSIE"; //IE浏览器 }if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){ return "Firefox"; //Firefox浏览器 }if(isSafari=navigator.userAgent.indexOf("Safari")>0) { return "Safari";//Safan浏览器 }if(isCamino=navigator.userAgent.indexOf("Camino")>0){ return "Camino"; //Camino浏览器 } if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){ return "Gecko";//Gecko浏览器 } }

十七、强制移动端页面横屏显示

$( window ).on( "orientationchange", function( event ) { if (event.orientation=='portrait') { $('body').css('transform', 'rotate(90deg)'); } else { $('body').css('transform', 'rotate(0deg)'); } }); $( window ).orientationchange();

十八、电脑端页面全屏显示

function fullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } }fullscreen(document.documentElement);

十九、获得/失去焦点

1、JavaScript实现

<input id="i_input" type="text" value='会员卡号/手机号'/>< 
// JavaScript window.onload = function(){ var oIpt = document.getElementById("i_input");if(oIpt.value == "会员卡号/手机号"){ oIpt.style.color = "#888"; }else{ oIpt.style.color = "#000"; };oIpt.onfocus = function(){ if(this.value == "会员卡号/手机号"){ this.value=""; this.style.color = "#000"; this.type = "password"; }else{ this.style.color = "#000"; } };oIpt.onblur = function(){ if(this.value == ""){ this.value="会员卡号/手机号"; this.style.color = "#888"; this.type = "text"; } }; }

2、jQuery实现

<input type="text"class="oldpsw" id="showPwd" value="请输入您的注册密码"/> <input type="password" name="psw" class="oldpsw" id="password" value="" style="display:none;"/></pre><pre style="margin: 8px 0px; padding: 8px; font-family: Arial; border: 1px solid rgb(204, 204, 204); background: rgb(243, 243, 243); color: rgb(85, 85, 85); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// jQuery $("#showPwd").focus(function() { var text_value=$(this).val(); if (text_value =='请输入您的注册密码') { $("#showPwd").hide(); $("#password").show().focus(); } }); $("#password").blur(function() { var text_value = $(this).val(); if (text_value == "") { $("#showPwd").show(); $("#password").hide(); } });

二十、获取上传文件大小

<input type="file" id="filePath" onchange="getFileSize(this)"/></pre><pre style="margin: 8px 0px; padding: 8px; font-family: Arial; border: 1px solid rgb(204, 204, 204); background: rgb(243, 243, 243); color: rgb(85, 85, 85); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">// 兼容IE9低版本 function getFileSize(obj){ var filesize;if(obj.files){ filesize = obj.files[0].size; }else{ try{ var path,fso;path = document.getElementById('filePath').value; fso = new ActiveXObject("Scripting.FileSystemObject");filesize = fso.GetFile(path).size;} catch(e){ // 在IE9及低版本浏览器，如果不容许ActiveX控件与页面交互，点击了否，就无法获取size console.log(e.message); // Automation 服务器不能创建对象 filesize = 'error'; // 无法获取 } } return filesize; }

二十一、限制上传文件类型

1、高版本浏览器

<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf">

2、限制图片

<input type="file" class="file" value="上传" accept="image/*"/>

3、低版本浏览器

<input type="file" id="filePath" onchange="limitTypes()"/> 
/* 通过扩展名，检验文件格式。* @parma filePath{string} 文件路径* @parma acceptFormat{Array} 允许的文件类型* @result 返回值{Boolen}：true or false*/function checkFormat(filePath,acceptFormat){ var resultBool= false, ex = filePath.substring(filePath.lastIndexOf('.') + 1); ex = ex.toLowerCase();for(var i = 0; i < acceptFormat.length; i++){ 　　if(acceptFormat[i] == ex){ resultBool = true; break; 　　} } return resultBool; };function limitTypes(){ var obj = document.getElementById('filePath'); var path = obj.value; var result = checkFormat(path,['bmp','jpg','jpeg','png']);if(!result){ alert('上传类型错误，请重新上传'); obj.value = ''; } }

二十二、正则表达式

//验证邮箱/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/ //验证手机号/^1[3|5|8|7]\d{9}$/ //验证URL/^http:\/\/.+\.///验证身份证号码/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/ //匹配字母、数字、中文字符/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/ //匹配中文字符 /[\u4e00-\u9fa5]/ //匹配双字节字符(包括汉字)/[^\x00-\xff]/

二十三、限制字符数

<input id="txt" type="text"> 
//字符串截取 function getByteVal(val, max) { var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break; returnValue += val[i]; } return returnValue; }$('#txt').on('keyup', function () { var val = this.value; if (val.replace(/[^\x00-\xff]/g, "**").length > 14) { this.value = getByteVal(val, 14); } });

二十四、验证码倒计时

<input id="send" type="button" value="发送验证码"> 
// JavaScript var times = 60, // 时间设置60秒 timer = null;document.getElementById('send').onclick = function () { // 计时开始 timer = setInterval(function () { times--;if (times <= 0) { send.value = '发送验证码'; clearInterval(timer); send.disabled = false; times = 60; } else { send.value = times + '秒后重试'; send.disabled = true; } }, 1000); } 
var times = 60, timer = null;$('#send').on('click', function () { var $this = $(this);// 计时开始 timer = setInterval(function () { times--;if (times <= 0) { $this.val('发送验证码'); clearInterval(timer); $this.attr('disabled', false); times = 60; } else { $this.val(times + '秒后重试'); $this.attr('disabled', true); } }, 1000); });

二十五、时间倒计时

<p id="_lefttime"></p> 
function countdown() {var endtime = new Date("May 2, 2018 21:31:09"); var nowtime = new Date();if (nowtime >= endtime) { document.getElementById("_lefttime").innerHTML = "倒计时间结束"; return; }var leftsecond = parseInt((endtime.getTime() - nowtime.getTime()) / 1000); if (leftsecond < 0) { leftsecond = 0; }__d = parseInt(leftsecond / 3600 / 24); __h = parseInt((leftsecond / 3600) % 24); __m = parseInt((leftsecond / 60) % 60);__s = parseInt(leftsecond % 60);document.getElementById("_lefttime").innerHTML = __d + "天" + __h + "小时" + __m + "分" + __s + "秒"; }countdown();setInterval(countdown, 1000);

二十六、倒计时跳转

<div id="showtimes"></div> 
// 设置倒计时秒数 var t = 10;// 显示倒计时秒数 function showTime(){ t -= 1; document.getElementById('showtimes').innerHTML= t;if(t==0){ location.href='error404.asp'; }//每秒执行一次 showTime() setTimeout("showTime()",1000); }showTime();

二十七、时间戳、毫秒格式化

function formatDate(now) {var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意 JavaScript 月份+1var d = now.getDate(); var h = now.getHours();var m = now.getMinutes();var s = now.getSeconds();return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;} var nowDate = new Date(1442978789184);alert(formatDate(nowDate));

二十八、当前日期

var calculateDate = function(){var date = new Date(); var weeks = ["日","一","二","三","四","五","六"];return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+ date.getDate()+"日 星期"+weeks[date.getDay()]; }$(function(){ $("#dateSpan").html(calculateDate()); });

二十九、判断周六/周日

<p id="text"></p> 
function time(y,m){ var tempTime = new Date(y,m,0); var time = new Date(); var saturday = new Array(); var sunday = new Array();for(var i=1;i<=tempTime.getDate();i++){ time.setFullYear(y,m-1,i);var day = time.getDay();if(day == 6){ saturday.push(i); }else if(day == 0){ sunday.push(i); } }var text = y+"年"+m+"月份"+"<br />" +"周六："+saturday.toString()+"<br />" +"周日："+sunday.toString();document.getElementById("text").innerHTML = text; }time(2018,5);

三十、AJAX调用错误处理

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

三十一、链式插件调用

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

通过使用链式，可以改善

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

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

本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：582735936，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。


本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/12281.html
上一篇：C2C场外交易所网站搭建币币交易软件开发 下一篇：自己开发了一款小说网站！师傅说这个项目做外包可以拿3W？
相关企业建站知识
    SQL执行错误，请检查