摘要:一預(yù)加載圖像二檢查圖像是否加載三自動(dòng)修復(fù)破壞的圖像四懸停切換五淡入淡出顯示隱藏隱藏顯示六鼠標(biāo)滾輪七鼠標(biāo)坐標(biāo)實(shí)現(xiàn)實(shí)現(xiàn)獲取鼠標(biāo)在圖片上的坐標(biāo)獲取元素相對(duì)于頁(yè)面的坐標(biāo)八禁止移動(dòng)端瀏覽器頁(yè)面滾動(dòng)實(shí)現(xiàn)實(shí)現(xiàn)九阻止默認(rèn)行為十阻止冒泡十
一、預(yù)加載圖像
$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $("img").attr("src",arguments[i]); } } $.preloadImages("img/hover-on.png","img/hover-off.png");二、檢查圖像是否加載
$("img").load(function () { console.log("image load successful"); });三、自動(dòng)修復(fù)破壞的圖像
$("img").on("error", function () { if (!$(this).hasClass("broken-image")) { $(this).prop("src","https://cdn.segmentfault.com/v-5cc2cd8e/global/img/logo-b.svg").addClass("broken-image"); } });四、懸停切換
// addClass、removeClass $(selector).hover(function () { $(selector).addClass(className); }, function () { $(selector).removeClass(className); }); // toggleClass $(selector).hover(function () { $(selector).toggleClass(className); });五、淡入淡出/顯示隱藏
$("img").click(function (e) { // 隱藏 $(this).fadeToggle("slow"); // 顯示 $(this).slideToggle("slow"); });六、鼠標(biāo)滾輪
$("#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"); } });七、鼠標(biāo)坐標(biāo) 1、JavaScript實(shí)現(xiàn)
X: Y:
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實(shí)現(xiàn)
$("#ele").click(function(event){ //獲取鼠標(biāo)在圖片上的坐標(biāo) console.log("X:" + event.offsetX+" Y:" + event.offsetY); //獲取元素相對(duì)于頁(yè)面的坐標(biāo) console.log("X:"+$(this).offset().left+" Y:"+$(this).offset().top); });八、禁止移動(dòng)端瀏覽器頁(yè)面滾動(dòng) 1、HTML實(shí)現(xiàn) 2、JavaScript實(shí)現(xiàn)
document.addEventListener("touchmove", function(event) { event.preventDefault(); });九、阻止默認(rèn)行為
// 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(); });十一、檢測(cè)瀏覽器是否支持svg
function isSupportSVG() { var SVG_NS = "http://www.w3.org/2000/svg"; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, "svg").createSVGRect; } console.log(isSupportSVG());十二、檢測(cè)瀏覽器是否支持canvas
function isSupportCanvas() { if(document.createElement("canvas").getContext){ return true; }else{ return false; } } console.log(isSupportCanvas());十三、檢測(cè)是否是微信瀏覽器
function isWeiXinClient() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else { return false; } } alert(isWeiXinClient());十四、檢測(cè)是否移動(dòng)端及瀏覽器內(nèi)核
var browser = { versions: function() { var u = navigator.userAgent; return { trident: u.indexOf("Trident") > -1, //IE內(nèi)核 presto: u.indexOf("Presto") > -1, //opera內(nèi)核 webKit: u.indexOf("AppleWebKit") > -1, //蘋(píng)果、谷歌內(nèi)核 gecko: u.indexOf("Firefox") > -1, //火狐內(nèi)核Gecko mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否移動(dòng)終端 ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android iPhone: u.indexOf("iPhone") > -1 , //iPhone iPad: u.indexOf("iPad") > -1, //iPad webApp: u.indexOf("Safari") > -1 //Safari }; } } if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) { alert("移動(dòng)端"); }十五、檢測(cè)是否電腦端/移動(dòng)端
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/"; }十六、檢測(cè)瀏覽器內(nèi)核
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瀏覽器 } }十七、強(qiáng)制移動(dòng)端頁(yè)面橫屏顯示
$( window ).on( "orientationchange", function( event ) { if (event.orientation=="portrait") { $("body").css("transform", "rotate(90deg)"); } else { $("body").css("transform", "rotate(0deg)"); } }); $( window ).orientationchange();十八、電腦端頁(yè)面全屏顯示
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);十九、獲得/失去焦點(diǎn) 1、JavaScript實(shí)現(xiàn)
// JavaScript window.onload = function(){ var oIpt = document.getElementById("i_input"); if(oIpt.value == "會(huì)員卡號(hào)/手機(jī)號(hào)"){ oIpt.style.color = "#888"; }else{ oIpt.style.color = "#000"; }; oIpt.onfocus = function(){ if(this.value == "會(huì)員卡號(hào)/手機(jī)號(hào)"){ this.value=""; this.style.color = "#000"; this.type = "password"; }else{ this.style.color = "#000"; } }; oIpt.onblur = function(){ if(this.value == ""){ this.value="會(huì)員卡號(hào)/手機(jī)號(hào)"; this.style.color = "#888"; this.type = "text"; } }; }2、jQuery實(shí)現(xiàn)
// jQuery $("#showPwd").focus(function() { var text_value=$(this).val(); if (text_value =="請(qǐng)輸入您的注冊(cè)密碼") { $("#showPwd").hide(); $("#password").show().focus(); } }); $("#password").blur(function() { var text_value = $(this).val(); if (text_value == "") { $("#showPwd").show(); $("#password").hide(); } });二十、獲取上傳文件大小
// 兼容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控件與頁(yè)面交互,點(diǎn)擊了否,就無(wú)法獲取size console.log(e.message); // Automation 服務(wù)器不能創(chuàng)建對(duì)象 filesize = "error"; // 無(wú)法獲取 } } return filesize; }二十一、限制上傳文件類型 1、高版本瀏覽器 2、限制圖片 3、低版本瀏覽器
/* 通過(guò)擴(kuò)展名,檢驗(yàn)文件格式。 * @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("上傳類型錯(cuò)誤,請(qǐng)重新上傳"); obj.value = ""; } }二十二、正則表達(dá)式
//驗(yàn)證郵箱 /^w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/ //驗(yàn)證手機(jī)號(hào) /^1[3|5|8|7]d{9}$/ //驗(yàn)證URL /^http://.+./ //驗(yàn)證身份證號(hào)碼 /(^d{15}$)|(^d{17}([0-9]|X|x)$)/ //匹配字母、數(shù)字、中文字符 /^([A-Za-z0-9]|[u4e00-u9fa5])*$/ //匹配中文字符 /[u4e00-u9fa5]/ //匹配雙字節(jié)字符(包括漢字) /[^x00-xff]/二十三、限制字符數(shù)
//字符串截取 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); } });二十四、驗(yàn)證碼倒計(jì)時(shí)
// JavaScript var times = 60, // 時(shí)間設(shè)置60秒 timer = null; document.getElementById("send").onclick = function () { // 計(jì)時(shí)開(kāi)始 timer = setInterval(function () { times--; if (times <= 0) { send.value = "發(fā)送驗(yàn)證碼"; 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); // 計(jì)時(shí)開(kāi)始 timer = setInterval(function () { times--; if (times <= 0) { $this.val("發(fā)送驗(yàn)證碼"); clearInterval(timer); $this.attr("disabled", false); times = 60; } else { $this.val(times + "秒后重試"); $this.attr("disabled", true); } }, 1000); });二十五、時(shí)間倒計(jì)時(shí)
function countdown() { var endtime = new Date("May 2, 2018 21:31:09"); var nowtime = new Date(); if (nowtime >= endtime) { document.getElementById("_lefttime").innerHTML = "倒計(jì)時(shí)間結(jié)束"; 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 + "小時(shí)" + __m + "分" + __s + "秒"; } countdown(); setInterval(countdown, 1000);二十六、倒計(jì)時(shí)跳轉(zhuǎn)
// 設(shè)置倒計(jì)時(shí)秒數(shù) var t = 10; // 顯示倒計(jì)時(shí)秒數(shù) function showTime(){ t -= 1; document.getElementById("showtimes").innerHTML= t; if(t==0){ location.href="error404.asp"; } //每秒執(zhí)行一次 showTime() setTimeout("showTime()",1000); } showTime();二十七、時(shí)間戳、毫秒格式化
function formatDate(now) { var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意 JavaScript 月份+1 var 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));二十八、當(dāng)前日期
var calculateDate = function(){ var date = new Date(); var weeks = ["日","一","二","三","四","五","六"]; return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+ date.getDate()+"日 星期"+weeks[date.getDay()]; } $(function(){ $("#dateSpan").html(calculateDate()); });二十九、判斷周六/周日
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+"月份"+"
" +"周六:"+saturday.toString()+"
" +"周日:"+sunday.toString(); document.getElementById("text").innerHTML = text; } time(2018,5);
本文在GitHub的地址 Common-code
閱讀更多
參考文章 『總結(jié)』web前端開(kāi)發(fā)常用代碼整理
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/107766.html
摘要:一預(yù)加載圖像二檢查圖像是否加載三自動(dòng)修復(fù)破壞的圖像四懸停切換五淡入淡出顯示隱藏隱藏顯示六鼠標(biāo)滾輪七鼠標(biāo)坐標(biāo)實(shí)現(xiàn)實(shí)現(xiàn)獲取鼠標(biāo)在圖片上的坐標(biāo)獲取元素相對(duì)于頁(yè)面的坐標(biāo)八禁止移動(dòng)端瀏覽器頁(yè)面滾動(dòng)實(shí)現(xiàn)實(shí)現(xiàn)九阻止默認(rèn)行為十阻止冒泡十 一、預(yù)加載圖像 $.preloadImages = function () { for (var i = 0; i < arguments.length; i...
摘要:一預(yù)加載圖像二檢查圖像是否加載三自動(dòng)修復(fù)破壞的圖像四懸停切換五淡入淡出顯示隱藏隱藏顯示六鼠標(biāo)滾輪七鼠標(biāo)坐標(biāo)實(shí)現(xiàn)實(shí)現(xiàn)獲取鼠標(biāo)在圖片上的坐標(biāo)獲取元素相對(duì)于頁(yè)面的坐標(biāo)八禁止移動(dòng)端瀏覽器頁(yè)面滾動(dòng)實(shí)現(xiàn)實(shí)現(xiàn)九阻止默認(rèn)行為十阻止冒泡十 一、預(yù)加載圖像 $.preloadImages = function () { for (var i = 0; i < arguments.length; i...
摘要:強(qiáng)大的表單驗(yàn)證前端掘金支持非常強(qiáng)大的內(nèi)置表單驗(yàn)證,以及。面向?qū)ο蠛兔嫦蜻^(guò)程的區(qū)別的種設(shè)計(jì)模式全解析后端掘金一設(shè)計(jì)模式的分類總體來(lái)說(shuō)設(shè)計(jì)模式分為三大類創(chuàng)建型模式,共五種工廠方法模式抽象工廠模式單例模式建造者模式原型模式。 強(qiáng)大的 Angular 表單驗(yàn)證 - 前端 - 掘金Angular 支持非常強(qiáng)大的內(nèi)置表單驗(yàn)證,maxlength、minlength、required 以及 patt...
摘要:如果你的運(yùn)行緩慢,你可以考慮是否能優(yōu)化請(qǐng)求,減少對(duì)的操作,盡量少的操,或者犧牲其它的來(lái)?yè)Q取性能。在認(rèn)識(shí)描述這些核心元素的過(guò)程中,我們也會(huì)分享一些當(dāng)我們構(gòu)建的時(shí)候遵守的一些經(jīng)驗(yàn)規(guī)則,一個(gè)應(yīng)用應(yīng)該保持健壯和高性能來(lái)維持競(jìng)爭(zhēng)力。 一個(gè)開(kāi)源的前端錯(cuò)誤收集工具 frontend-tracker,你值得收藏~ 蒲公英團(tuán)隊(duì)最近開(kāi)發(fā)了一款前端錯(cuò)誤收集工具,名叫 frontend-tracker ,這款...
閱讀 3463·2021-11-25 09:43
閱讀 1062·2021-11-15 11:36
閱讀 3313·2021-11-11 16:54
閱讀 3974·2021-09-27 13:35
閱讀 4364·2021-09-10 11:23
閱讀 5675·2021-09-07 10:22
閱讀 3032·2021-09-04 16:40
閱讀 769·2021-08-03 14:03