當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript代码片段

發(fā)布時間：2023/11/29 javascript 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript代码片段小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

簡介：本文收集了我常用的JavaScript代碼片段，歡迎提意見！

大灰狼邊敲門邊說：“小兔子乖乖，把門兒開開！” 小兔子聽到后，連忙去開門：“來嘍！” 兔媽媽對小兔子喊道：“不許開！是大灰狼！” 大灰狼在門口感嘆道：“哎，騙一個女孩容易，騙一個女人難呀！”

JavaScript動態(tài)加載

//NO.1 function loadScript(url, callback){var script = document.createElement ("script")script.type = "text/javascript";if (script.readyState){ //IEscript.onreadystatechange = function(){if (this.readyState == "loaded" || this.readyState == "complete"){this.onreadystatechange = null;callback();}};} else { //Othersscript.onload = function(){callback();};}script.src = url;document.getElementsByTagName("head")[0].appendChild(script); }//NO.2 function loadScript(url, callback){var xhr = new XMLHttpRequest();xhr.open("get", url, true);xhr.onreadystatechange = function(){if (xhr.readyState == 4){if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){var script = document.createElement ("script");script.type = "text/javascript";script.text = xhr.responseText;document.body.appendChild(script);callback();}}};xhr.send(null); } View Code

DOM加載完執(zhí)行

是否標(biāo)準(zhǔn)模式(IE)

function isCompatMode(){return document.compatMode == 'CSS1Compat';} View Code

Link規(guī)則操作

//添加第一條規(guī)則 //insertRule(sheet, 'body', 'background-color:red', 0); function insertRule(sheet, selectorText, cssText, position) {if (sheet.insertRule) {sheet.insertRule(selectorText + ' { ' + cssText + ' }', position);} else if (sheet.addRule) {sheet.addRule(selectorText, cssText, position);} }//刪除第一條規(guī)則 //deleteRule(sheet, 0); function deleteRule(sheet, position) {if (sheet.deleteRule) {sheet.deleteRule(position);} else if (sheet.removeRule) {sheet.removeRule(position);} } View Code

加載樣式表

function addSheet(url){var oLink = document.createElement('link'),oHead = document.getElementsByTagName('head')[0];oLink.rel = 'stylesheet';oLink.type = 'text/css';oLink.href = url;oHead.appendChild(oLink); } View Code

獲取CSS樣式

function getStyle(o, attr){if(o.currentStyle){return o.currentStyle[attr];}else{return getComputedStyle(o,false)[attr];} } View Code

getByClass

hasClass

function hasClass (element, className){return element.className.match(new RegExp('(\\s|^)'+ className +'(\\s|$)')); } View Code

addClass

function addClass(element, cName) {if (!hasClass(element, cName)) {element.className += ' ' + cName;} } View Code

removeClass

function removeClass(element, cName) {if (hasClass(element, cName)) {element.className = element.className.replace(new RegExp('(\\s|^)' + cName + '(\\s|$)'), ' ');} } View Code

JSONP調(diào)用

獲取服務(wù)器時間

Cookie操作

base64編碼解碼?

function b64Encode(str) {return btoa(unescape(encodeURIComponent(str))); }function b64Decode(str) {return decodeURIComponent(escape(atob(str))); } View Code

瀏覽器判斷

var browser = function() {var u = navigator.userAgent.toLowerCase();return { version: (u.match(/.+(?:rv|it|ra|ie|chrome|micromessenger|version)[\/: ]([\d.]+)/) || [])[1], safari: /safari/.test(u) && !/chrome/.test(u), opera: /opera/.test(u), msie: /msie|like gecko$/.test(u) && !/opera/.test(u), firefox: /firefox/.test(u) && !/(compatible|webkit)/.test(u),chrome: /chrome/.test(u) && /safari/.test(u), mobile: !!/applewebkit.*mobile.*/.test(u),ios: !!/\(i[^;]+;( u;)? cpu.+mac os x/.test(u),android: /android|linux/.test(u), // android或uciPhone: /iphone/.test(u),iPad: /ipad/.test(u),weChat: /micromessenger/.test(u) // 微信 }; }; View Code

IE版本判斷

var _IE = (function(){var v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');while (div.innerHTML = '',all[0]);return v > 4 ? v : false ; }()); View Code

階乘緩存

獲取字符串長度

// NO.1 String.prototype.sLen = function(){var b = 0, l = this.length;if(l){for(var i = 0; i < l; i++){if(this.charCodeAt(i) > 255){b += 2;}else{b ++;}}return b;}else{return 0;} };// NO.2 String.prototype.sLen = function(){var b = 0, l = this.length;if(l){for(var i = 0; i < l; i++){var c = this.charAt(i);if(escape(c).length > 4){b += 2;}else if(c != '\r'){b ++;}}return b;}else{return 0;} };// NO.3 String.prototype.sLen = function(){var b = 0, l = this.length;if(l){for(var i = 0; i < l; i++){var c = this.charAt(i);if(/^[\u0000-\u00ff]$]/.test(c)){b ++;}else if(c != '\r'){b += 2;}}return b;}else{return 0;} };// NO.4 String.prototype.sLen = function(){var s = this.replace(/[^\x00-\xff]/g, "**");return s.length; }; View Code

判斷數(shù)據(jù)類型

var isType = function(obj, type){return Object.prototype.toString.call(obj) === '[object '+ type +']'; }; View Code

獲取窗口位置

function sereen(){return {left : window.screenLeft || window.scrollX,top : window.screenTop || window.scrollY}; } View Code

獲取可視窗口大小

function client(){//IE6不加dtd會進(jìn)入怪癖模式，client需要通過document.body獲取return {width : document.documentElement.clientWidth || document.body.clientWidth,height : document.documentElement.clientHeight || document.body.clientHeight}; } View Code

獲取scrollTop

function getScrollTop(){if(typeof pageYOffset!= 'undefined'){return pageYOffset;} else {return (document.body || document.documentElement).scrollTop;} } View Code

滾動到指定區(qū)域

el.scrollIntoView() View Code

今天星期幾

"今天是星期" + "天一二三四五六".charAt(new Date().getDay()) View Code

頁面是否在iframe里

if(self==top){//not in iframe }else{//in iframe } View Code

返回最小值~最大值之間隨機(jī)數(shù)

function random(min, max) {return Math.floor(Math.random() * (max - min + 1) + min); } View Code

數(shù)組去重

// NO.1 Array.prototype.unique = function() {for(var i=0, len = this.length; i<len; i++) {for(var j=i+1; j<len; j++) {if(this[i] === this[j])this.splice(j, 1);}}return this; }; // ["a","a","b"].unique();// NO.2 Array.prototype.unique = function (){var that = this, temp = {}, result = [];for(var i = 0, len = that.length; i < len; i++) {if(!temp[typeof (that[i])+that[i]]){result.push(that[i]);temp[typeof(that[i])+that[i]] = '1';}}return result; } // ["a","a","b"].unique(); View Code

數(shù)組快排

將arguments轉(zhuǎn)換成數(shù)組

var arr = Array.prototype.slice.call(arguments, 0); View Code

數(shù)組隨機(jī)排序

var arr = [1, 2, 3, 4, 5]; arr.sort(function(){return (Math.random() - 0.5); }); View Code

獲取數(shù)組中最小/大值

var max = Math.max.apply(null, array); var min = Math.min.apply(null, array); View Code

數(shù)組index

function index(t, arr){if(arr.indexOf){return arr.indexOf(t);}for(var i = arr.length ; i--; ){if(arr[i]===t){return i*1;}}return -1; } View Code

多維數(shù)組轉(zhuǎn)一維數(shù)組

function arr2ToArr(arr){return arr.toString().split(","); } View Code

選擇數(shù)組中兩數(shù)之和等于某值的情況?

// NO.1 var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], result = [], count = 10; for(var i = 0, len = arr.length; i < len; i ++){for(var j = i + 1; j < len; j ++){if(arr[i] + arr[j] === count){result.push([arr[i], arr[j]]);}} }// NO.2 var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], result = [], count = 10; for(var i = 0, len = Math.round(arr.length/2); i < len; i ++){if(arr.indexOf(count - arr[i]) !== -1){result.push([arr[i], count - arr[i]]);} } View Code

數(shù)字金額轉(zhuǎn)換成大寫

日期格式化

Date.prototype.toString=function(format,loc){var time={};time.Year=this.getFullYear();time.TYear=(""+time.Year).substr(2);time.Month=this.getMonth()+1;time.TMonth=time.Month<10?"0"+time.Month:time.Month;time.Day=this.getDate();time.TDay=time.Day<10?"0"+time.Day:time.Day;time.Hour=this.getHours();time.THour=time.Hour<10?"0"+time.Hour:time.Hour;time.hour=time.Hour<13?time.Hour:time.Hour-12;time.Thour=time.hour<10?"0"+time.hour:time.hour;time.Minute=this.getMinutes();time.TMinute=time.Minute<10?"0"+time.Minute:time.Minute;time.Second=this.getSeconds();time.TSecond=time.Second<10?"0"+time.Second:time.Second;time.Millisecond=this.getMilliseconds();time.Week=this.getDay();var MMMArrEn=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var MMMArr=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];var WeekArrEn=["Sun","Mon","Tue","Web","Thu","Fri","Sat"];var WeekArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];var oNumber=time.Millisecond/1000;if(format!=undefined && format.replace(/\s/g,"").length>0){if(loc!=undefined && loc =="en"){MMMArr=MMMArrEn.slice(0);WeekArr=WeekArrEn.slice(0);}format=format.replace(/yyyy/ig,time.Year).replace(/yyy/ig,time.Year).replace(/yy/ig,time.TYear).replace(/y/ig,time.TYear).replace(/MMM/g,MMMArr[time.Month-1]).replace(/MM/g,time.TMonth).replace(/M/g,time.Month).replace(/dd/ig,time.TDay).replace(/d/ig,time.Day).replace(/HH/g,time.THour).replace(/H/g,time.Hour).replace(/hh/g,time.Thour).replace(/h/g,time.hour).replace(/mm/g,time.TMinute).replace(/m/g,time.Minute).replace(/ss/ig,time.TSecond).replace(/s/ig,time.Second).replace(/fff/ig,time.Millisecond).replace(/ff/ig,oNumber.toFixed(2)*100).replace(/f/ig,oNumber.toFixed(1)*10).replace(/EEE/g,WeekArr[time.Week]);}else{format=time.Year+"-"+time.Month+"-"+time.Day+" "+time.Hour+":"+time.Minute+":"+time.Second;}return format; }var d=new Date(); console.log(d.toString()); //2012-7-27 9:26:52 console.log(d.toString("")); //2012-7-27 9:26:52 console.log(d.toString("yyyy-MM-dd HH:mm:ss")); //2012-07-27 09:26:52 console.log(d.toString("yyyy年MM月dd日 HH:mm:ss")); //2012年07月27日 09:26:52 console.log(d.toString("yyyy-MM-dd HH:mm:ss fff")); //2012-07-27 09:26:52 237 console.log(d.toString("yyyy年 MMM dd EEE")); //2012年七月 27 星期五 console.log(d.toString("yyyy MMM dd EEE","en")); //2012 Jul 27 Fri View Code

五種繼承方式

//構(gòu)造函數(shù)的繼承的五種方式 function Animal() {this.species = "dong wu"; }// NO.1 構(gòu)造函數(shù)綁定 function Cat(name, color) {Animal.apply(this, arguments);this.name = name;this.color = color; }// NO.2 prototype模式 function Cat (name, color) {this.name = name;this.color = color; } Cat.prototype = new Animal(); Cat.prototype.constructor = Cat;// NO.3 直接繼承prototype function Cat(name, color) {this.name = name;this.color = color; } Cat.prototype = Animal.prototype; Cat.prototype.constructor = Cat;// NO.4 利用空對象做中介 function Cat(name, color) {this.name = name;this.color = color; }function F(){} F.prototype = Animal.prototype;Cat.prototype = new F(); Cat.prototype.constructor = Cat;// NO.5 拷貝繼承 function Cat(name, color) {this.name = name;this.color = color; }function extend(Child, Parent) {var p = Parent.prototype;var c = Child.prototype;for (var i in p) {c[i] = p[i];}c.uber = p; } extend(Cat, Animal); View Code

根據(jù)生日算年齡

function getAge(dateString) {var today = new Date();var birthDate = new Date(dateString);var age = today.getFullYear() - birthDate.getFullYear();var m = today.getMonth() - birthDate.getMonth();if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {age--;}return age; } console.log(getAge("1990,1,12")); View Code

事件綁定

自定義事件

加載獲取圖片尺寸

var img = new Image(); img.onload = function() {console.log(this.width + 'x' + this.height); } View Code

Object.create

var create = Object.create || function(o){var F = function(o){};F.prototype = o;return new F; }; View Code

Object.prototype.bind

var bind = Object.prototype.bind || function (scope) {var fn = this;return function () {return fn.apply(scope);}; }; View Code

設(shè)置選定文本

//選定文本 function setSelectText(text, start, num) {if (text.setSelectionRange) {text.setSelectionRange(start,num);text.focus();} else if (text.createTextRange) {var range = text.createTextRange();range.collapse(true);range.moveStart('character',start);range.moveEnd('character',num - start); //用最后的位置 - 開始的位置 = 個數(shù) range.select();} } View Code

獲取選擇文本

在光標(biāo)位置插入字符串

// 光標(biāo)位置插入字符串 function insertHtmlAtCursor(id, text){var o = document.getElementById(id);if (document.selection){o.focus();document.selection.createRange().text = text;o.focus();}else if (o.selectionStart) {var start = o.selectionStart, end = o.selectionEnd;o.value = o.value.substring(0, start) + text + o.value.substring(end, o.value.length);} } View Code

在url中查找指定參數(shù)的值

IE6里a:hover圖片緩存

document.execCommand("BackgroundImageCache",false,true); View Code

反轉(zhuǎn)文本順序

String.prototype.reverse = function (){if(this.length < 2){return this;}var str = this.split(''), result = '', len = this.length - 1;while(len >= 0){result += this[len];len --;}return result; }'反轉(zhuǎn)文本順序'.reverse(); View Code

清除空格

String.prototype.trim = String.trim || function() {return this.replace(/^\s*(.*?)\s+$/, "$1") }; View Code

加入收藏

設(shè)為首頁

insertAfter

innerText操作

//獲取innertext function getInnerText(element) {if (typeof element.textContent == 'string') {return element.textContent;} else {return element.innerText;} } //設(shè)置innertext function setInnerText(element, text) {if (typeof element.textContent == 'string') {element.textContent = text;} else {element.innerText = text;} } View Code

獲取offsetTop

//獲取offsetTop function offsetTop(element) {var top = element.offsetTop; //第一層的距離var parent = element.offsetParent;while (parent !== null) {top += parent.offsetTop;parent = parent.offsetParent;}return top; } View Code

構(gòu)建字符串的最優(yōu)方法

var arr = ['item 1', 'item 2', 'item 3', ...]; var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>'; View Code

獲取字符串中出現(xiàn)次數(shù)最多的字符?

// NO.1 String.prototype.strCount = function (){var num = 0, val = '', result = null, temp = '', that = this;while (that) {temp = that;val = that.substr(0, 1);that = that.replace(new RegExp(val, "g"), "");if (temp.length - that.length > num) {num = temp.length - that.length;result = {val:val, num: num};}}return result; };// NO.2 String.prototype.strCount = function (){var obj = {}, num = 0, val = '';for(var i = 0, len = this.length; i < len; i+=1){if(!obj[this[i]]){obj[this[i]] = [];}obj[this[i]].push(this[i]);}for(var arr in obj){if(num < obj[arr].length){num = obj[arr].length;val = obj[arr][0];}}return {val:val, num: num}; };// NO.3 function strCount(str){var o = {}, ret = {name: '', num: 0};for(var i = 0, len = str.length; i < len; i++){if( o[str[i]] ) {o[str[i]]++;}else{o[str[i]] = 1;}if(ret.num < o[str[i]]){ret.name = str[i];ret.num = o[str[i]];}}return ret;}// NO.4 function strCount(str){var ret = {name: '', num: 0};str.split('').sort().join('').replace(/(\w)\1+/g, function($0, $1){if ( ret.num < $0.length ) {ret.num = $0.length;ret.name = $1;}});return ret; } View Code

對象深度clone?

千分位表示

// NO.1 function millesimal(v){var num = v.length%3, prev = '', next = v.substring(num), arr = [];if(num !== 0){prev = v.substring(0, num);arr.push(prev);}for(var i = 0, len = next.length; i < len; i += 3){arr.push(next.substr(i,3))}return arr.join(); }// NO.2 function millesimal(v){return v.toString().replace(/(?=(?!\b)(\d{3})+$)/g, ','); }// NO.3 function millesimal(v){return v.toString().replace(/\B(?=(\d{3})+$)/g, ','); } View Code

替換全部

String.prototype.replaceAll = function(s1, s2) {return this.replace(new RegExp(s1, "gm"), s2) } View Code

HTML轉(zhuǎn)義

// 轉(zhuǎn)義html標(biāo)簽 function HtmlEncode(text) {return text.replace(/&/g, '&amp').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>') } // 還原h(huán)tml標(biāo)簽 function HtmlDecode(text) {return text.replace(/&/g, '&').replace(/"/g, '\"').replace(/</g, '<').replace(/>/g, '>') } View Code

隨機(jī)字符串（字母&數(shù)字）

function randomStringNum(len) {var ret = "";for( ; ret.length < len; ret += Math.random().toString(36).substr(2));return ret.substr(0, len); } View Code

隨機(jī)顏色?

// (0xffffff+1) 表示顏色最大值(0x000000 ~ 0xffffff+1) // <<0 表示左移一位，將顏色16進(jìn)制的顏色值轉(zhuǎn)成整型 // toString(16) 表示再將整型的顏色值轉(zhuǎn)成16進(jìn)制 // slice(-6) 表示生成的16進(jìn)制值少于6位時，首尾依次補(bǔ)0 var getRandomColor = function(){return '#'+('00000'+(Math.random()*(0xffffff+1)<<0).toString(16)).slice(-6); }; View Code

curry

uncurrying

Function.prototype.uncurrying = function(){var self = this;return function(){return Function.prototype.call.apply(self, arguments);} }; View Code

函數(shù)節(jié)流

// 函數(shù)節(jié)流 var throttle = function(fn, interval){var self = fn,timer,firstTime = true;return function(){var args = arguments,that = this;if(firstTime){self.apply(that, args);return firstTime = false;}if(timer){return false;}timer = setTimeout(function(){clearTimeout(timer);timer = null;self.apply(that, args);}, interval || 500);}; }; View Code

分時調(diào)用

/*** [timeChunk 分時調(diào)用]* @param {[type]} arr [數(shù)據(jù)]* @param {Function} fn [處理函數(shù)]* @param {[type]} count [執(zhí)行次數(shù)]*/ var timeChunk = function(arr, fn, count){var obj, t, len = arr.length;var start = function(){for (var i = 0, obj; i < Math.min(count || 1, arr.length); i++){obj = arr.shift();fn(obj);}};return function(){t = setInterval(function(){if (arr.length === 0){return clearInterval(t);}start();}, 200);}; }; View Code

單例模式抽象

// 單例模式抽象 var getSingle = function(fn){var res;return function(){return res || (res = fn.apply(this, arguments)); } }; View Code

轉(zhuǎn)載于:https://www.cnblogs.com/jununx/p/3612280.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript代码片段的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。