轉載自https://github.com/jsfront/src/blob/master/js.md

### 如下是經常使用的代碼收集，沒有任何技術含量，只是填坑的積累。轉載請註明出處，謝謝。

#### 1. PC - js
- 返回指定範圍的隨機數(m-n之間)的公式
```javascript
Math.random()*(n-m)+m
```

- [return false](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false)
- [return false](http://www.75team.com/archives/201)
```javascript
// event.preventDefault()會阻擋預設要發生的事件.
// event.stopPropagation()會阻擋發生冒泡事件.
// 而return false則是前面二者的事情他都會作：
// 他會作event.preventDefault();
// 他會作event.stopPropagation();
// 中止callback function的執行而且當即return回來
```

- 防止被Iframe嵌套
```javascript
if(top != self){
location.href = 」about:blank」;
}
```

- 兩種圖片lazy加載的方式
第一個By JS中級交流羣 成都-獵巫 第二個By 上海-zenki
```javascript
// @description 準備爲圖片預加載使用的插件
// 使用的圖片容器css類名爲lazy-load-wrap
// 圖片真實地址爲data-lazy-src
// 當lazy-load-wrap容器進入視口，則開始替換容器內全部須要延遲加載的圖片路徑，並更改容器的加載狀態
//第一種方法
$.fn.compassLazyLoad=function(){
var _HEIGHT=window.innerHeight,
_lazyLoadWrap=$('.lazy-load-wrap');

var methods={
setOffsetTop:function(){
$.each(_lazyLoadWrap,function(i,n){
$(n).attr({
'top':n.offsetTop-_HEIGHT,
'status':'wait'
});
})
},
isShow:function(){
var _scrollTop=$(window).scrollTop;
//利用image容器判斷是否進入視口，而非image自己
$.each(_lazyLoadWrap,function(){
var _that=$(this);
if (_that.attr('status')==='done') {
return;
};
if (_that.attr('top')<=_scrollTop) {
_that.find('img[data-lazy-src]').each(function(i,n){
n.src=$(n).data('lazy-src');
});
_that.attr('status','done');
};
})
},
scroll:function(){
$(window).on('scroll',function(){
methods.isShow();
});
},
init:function(){
methods.setOffsetTop();
methods.isShow();
methods.scroll();
}
};
methods.init();

}

//第二種方法

var exist=(function($){
var timer=null,
temp=[].slice.call($('.container'));
ret={};

for(var i=0,len=temp.length-1;i<=len;i++){
ret[i]=temp[i];
}
var isExist=function(winTop,winEnd){
for(var i in ret){
console.log(ret);
var item=ret[i],
eleTop=item.offsetTop,
eleEnd=eleTop+item.offsetHeight;

if((eleTop>winTop&&eleTop<=winEnd)||(eleEnd>winTop&&eleEnd<=winEnd)){
$(item).css('background','none');
new Tab($(item).attr('id'),data).init;
delete ret[i];
}
}
}
return {
timer:timer;
isExist:isExist;
};
})($);

 

//第三種方法
Zepto(function ($) {
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay: 3000,
loop: true,
autoplayDisableOnInteraction: false
});
(function lazyLoad() {
var imgs = $(".lazyLoad");
var src = '';
$.each(imgs, function (index, item) {
src = $(item).attr('data-src');
$(item).attr('src', src);
});
})();
});
$(function () {
var lazyLoadTimerId = null;
/// 智能加載事件
$(window).bind("scroll", function () {
clearTimeout(lazyLoadTimerId);
lazyLoadTimerId = setTimeout(function () {
// 延遲加載全部圖片
var isHttp = (location.protocol === "http:");
$("#ym_images img").each(function () {
var self = $(this);
if (self.filter(":above-the-fold").length > 0) {
var originUrl = self.attr("data-original");
self.attr("src", originUrl);
}
});
}, 500);
});
});

```

- 某年某月的1號爲星期幾
```javascript
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
weekday[new Date(2015, 9, 1).getDay()]; //2015年10月1號
```

#### 2. Mobile - js

- [js 判斷IOS, 安卓](http://caibaojian.com/browser-ios-or-android.html)
```javascript
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
alert('是不是Android：'+isAndroid);
alert('是不是iOS：'+isiOS);
```

#### 3. [微信 weixin](http://loo2k.com/blog/detecting-wechat-client/)

- UserAgent 判斷微信客戶端
```javascript
// Mozilla/5.0 (iPhone; CPU iPhone OS 8_3 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Mobile/12F70 MicroMessenger/6.1.5 NetType/WIFI
function isWechat() {
var ua = navigator.userAgent.toLowerCase();
return /micromessenger/i.test(ua) || /windows phone/i.test(ua);
}
```

- JS接口安全域名不填寫，分享onMenuShareAppMessage直接會取默認值。
```javascript
// 分享onMenuShareAppMessage直接會取默認值
```

- 關閉當前頁面
```javascript
WeixinJSBridge.call('closeWindow');
```

- [支付接口方法調用必須在addevent裏邊調用](http://www.cnblogs.com/true_to_me/p/3565039.html)
```javascript
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady(){
that.initOrder();
}, false);
```

- 支付接口方法調用必須在
```javascript
WeixinJSBridge.invoke('getBrandWCPayRequest', d, function(res){
if(res.err_msg == "get_brand_wcpay_request:ok"){
// alert("支付成功");
// union.release(d.orderId);
resetUrl();
paySuccess('home', d.orderId);
} else {
cancelOrder(d.orderId);
// alert(res.err_msg);
}
loading.hide();
});
```

- 瀑布流無限加載實例
```javascript
// be dependent on jquery & jquery.infinitescroll.min.js
// insert this '<div id="more"><a href="api?page="></a></div>' to your page.html
(function($){
$(function(){
var $container = $('.list-wrap-gd');
function layOutCallBack() {
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.item-bar',
gutter: 10
});
});
$container.imagesLoaded().progress( function() {
$container.masonry('layout');
});
}

layOutCallBack();

$container.infinitescroll({
navSelector : "#more",
nextSelector : "#more a",
itemSelector : ".item-bar",
pixelsFromNavToBottom: 300,
loading:{
img: "/images/masonry_loading.gif",
msgText: ' ',
finishedMsg: "<em>已經到最後一頁</em>",
finished: function(){
$("#more").remove();
$("#infscr-loading").hide();
}
},
errorCallback:function(){
$(window).unbind('.infscr');
},
pathParse: function (path, nextPage) {
var query = "";
var keyword=$("#search_keyword").val();
var cat_id=$("#cat_id").val();
var brand_id=$("#brand_id").val();
var country_id = $("#country_id").val();
query = query + "&namekeyword="+keyword;
query = query +"&cat_id="+cat_id
query = query + "&brand_id=" + brand_id;
query = query + "&country_id=" + country_id;
path = [path,query];
return path;
}
},

function(newElements) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
layOutCallBack();
});
});
});
})(jQuery);
```

- [iOS，Safari瀏覽器，input等表單focus後fixed元素錯位問題](https://www.snip2code.com/Snippet/176582/--iOS-Safari----input---focus-fixed-----)
```javascript
if( /iPhone|iPod|iPad/i.test(navigator.userAgent) ) {
$(document).on('focus', 'input, textarea', function()
{
$('header').css("position", 'absolute');
$('footer').css("position", 'absolute');

});

$(document).on('blur', 'input, textarea', function()
{
$('header').css("position", 'fixed');
$('footer').css("position", 'fixed');

});
}

```

- 獲得地理位置
```javascript
function getLocation(callback){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(
function(p){
callback(p.coords.latitude, p.coords.longitude);
},
function(e){
var msg = e.code + "\n" + e.message;
}
);
}
}
```

- [rem計算適配](http://isux.tencent.com/web-app-rem.html)
```javascript
(function(doc, win){
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function(){
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
};

if(!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
```

- [另一種rem方案](http://www.html-js.com/article/3041)
```javascript
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');

dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * 2 / 10;
scale = 1 / dpr;

// 設置viewport，進行縮放，達到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');

// 設置data-dpr屬性，留做的css hack之用
docEl.setAttribute('data-dpr', dpr);

// 動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';

// 給js調用的，某一dpr下rem和px之間的轉換函數
window.rem2px = function(v) {
v = parseFloat(v);
return v * rem;
};
window.px2rem = function(v) {
v = parseFloat(v);
return v / rem;
};

window.dpr = dpr;
window.rem = rem;
```

- 獲取js所在路徑
```js
function getJsDir (src) {
var script = null;

if (src) {
script = [].filter.call(document.scripts, function (v) {
return v.src.indexOf(src) !== -1;
})[0];
} else {
script = document.scripts[document.scripts.length - 1];
}

return script ? script.src.substr(0, script.src.lastIndexOf('/')) : script;
}
```

- 從全局捕獲錯誤
```js
window.onerror = function (errMsg, scriptURI, lineNumber, columnNumber, errorObj) {
setTimeout(function () {
var rst = {
"錯誤信息：": errMsg,
"出錯文件：": scriptURI,
"出錯行號：": lineNumber,
"出錯列號：": columnNumber,
"錯誤詳情：": errorObj
};

alert(JSON.stringify(rst, null, 10));
});
};
```

#### 1. 經常使用方法 - js
- 字符串長度截取
```js
function cutstr(str, len) {
var temp,
icount = 0,
patrn = /[^\x00-\xff]/，
strre = "";
for (var i = 0; i < str.length; i++) {
if (icount < len - 1) {
temp = str.substr(i, 1);
if (patrn.exec(temp) == null) {
icount = icount + 1
} else {
icount = icount + 2
}
strre += temp
} else {
break;
}
}
return strre + "..."
}
```

- 替換所有
```js
String.prototype.replaceAll = function(s1, s2) {
return this.replace(new RegExp(s1, "gm"), s2)
}
````

- 清除空格
```js
String.prototype.trim = function() {
var reExtraSpace = /^\s*(.*?)\s+$/;
return this.replace(reExtraSpace, "$1")
}
```

- 清除左空格/右空格```jsfunction ltrim(s){ return s.replace( /^(\s*|　*)/, ""); } function rtrim(s){ return s.replace( /(\s*|　*)$/, ""); }```- 判斷是否以某個字符串開頭```jsString.prototype.startWith = function (s) { return this.indexOf(s) == 0}```- 判斷是否以某個字符串結束 ```jsString.prototype.endWith = function (s) { var d = this.length - s.length; return (d >= 0 && this.lastIndexOf(s) == d)}```- 轉義html標籤```jsfunction HtmlEncode(text) { return text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>')}```- 時間日期格式轉換```jsDate.prototype.Format = function(formatStr) { var str = formatStr; var Week = ['日', '一', '二', '三', '四', '五', '六']; str = str.replace(/yyyy|YYYY/, this.getFullYear()); str = str.replace(/yy|YY/, (this.getYear() % 100) > 9 ? (this.getYear() % 100).toString() : '0' + (this.getYear() % 100)); str = str.replace(/MM/, (this.getMonth() + 1) > 9 ? (this.getMonth() + 1).toString() : '0' + (this.getMonth() + 1)); str = str.replace(/M/g, (this.getMonth() + 1)); str = str.replace(/w|W/g, Week[this.getDay()]); str = str.replace(/dd|DD/, this.getDate() > 9 ? this.getDate().toString() : '0' + this.getDate()); str = str.replace(/d|D/g, this.getDate()); str = str.replace(/hh|HH/, this.getHours() > 9 ? this.getHours().toString() : '0' + this.getHours()); str = str.replace(/h|H/g, this.getHours()); str = str.replace(/mm/, this.getMinutes() > 9 ? this.getMinutes().toString() : '0' + this.getMinutes()); str = str.replace(/m/g, this.getMinutes()); str = str.replace(/ss|SS/, this.getSeconds() > 9 ? this.getSeconds().toString() : '0' + this.getSeconds()); str = str.replace(/s|S/g, this.getSeconds()); return str}```- 判斷是否爲數字類型 ```jsfunction isDigit(value) { var patrn = /^[0-9]*$/; if (patrn.exec(value) == null || value == "") { return false } else { return true }}```- 設置cookie值```jsfunction setCookie(name, value, Hours) { var d = new Date(); var offset = 8; var utc = d.getTime() + (d.getTimezoneOffset() * 60000); var nd = utc + (3600000 * offset); var exp = new Date(nd); exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000); document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"}```- 獲取cookie值```jsfunction getCookie(name) { var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)")); if (arr != null) return unescape(arr[2]); return null}```- 加載樣式文件表 ```jsfunction LoadStyle(url) { try { document.createStyleSheet(url) } catch(e) { var cssLink = document.createElement('link'); cssLink.rel = 'stylesheet'; cssLink.type = 'text/css'; cssLink.href = url; var head = document.getElementsByTagName('head')[0]; head.appendChild(cssLink) }}```- 返回腳本內容```jsfunction evalscript(s) { if(s.indexOf('<script') == -1) return s; var p = /<script[^\>]*?>([^\x00]*?)<\/script>/ig; var arr = []; while(arr = p.exec(s)) { var p1 = /<script[^\>]*?src=\"([^\>]*?)\"[^\>]*?(reload=\"1\")?(?:charset=\"([\w\-]+?)\")?><\/script>/i; var arr1 = []; arr1 = p1.exec(arr[0]); if(arr1) { appendscript(arr1[1], '', arr1[2], arr1[3]); } else { p1 = /<script(.*?)>([^\x00]+?)<\/script>/i; arr1 = p1.exec(arr[0]); appendscript('', arr1[2], arr1[1].indexOf('reload=') != -1); } } return s;}```- 清除腳本內容```jsfunction stripscript(s) { return s.replace(/<script.*?>.*?<\/script>/ig, '');}```- 動態加載腳本文件```jsfunction appendscript(src, text, reload, charset) { var id = hash(src + text); if(!reload && in_array(id, evalscripts)) return; if(reload && $(id)) { $(id).parentNode.removeChild($(id)); } evalscripts.push(id); var scriptNode = document.createElement("script"); scriptNode.type = "text/javascript"; scriptNode.id = id; scriptNode.charset = charset ? charset : (BROWSER.firefox ? document.characterSet : document.charset); try { if(src) { scriptNode.src = src; scriptNode.onloadDone = false; scriptNode.onload = function () { scriptNode.onloadDone = true; JSLOADED[src] = 1; }; scriptNode.onreadystatechange = function () { if((scriptNode.readyState == 'loaded' || scriptNode.readyState == 'complete') && !scriptNode.onloadDone) { scriptNode.onloadDone = true; JSLOADED[src] = 1; } }; } else if(text){ scriptNode.text = text; } document.getElementsByTagName('head')[0].appendChild(scriptNode); } catch(e) {}}```- 返回按ID檢索的元素對象```jsfunction $(id) { return !id ? null : document.getElementById(id);}```- 檢驗URL連接是否有效 ```jsfunction getUrlState(URL){ var xmlhttp = new ActiveXObject("microsoft.xmlhttp"); xmlhttp.Open("GET",URL, false); try{ xmlhttp.Send(); }catch(e){ }finally{ var result = xmlhttp.responseText; if(result){ if(xmlhttp.Status==200){ return(true); }else{ return(false); } }else{ return(false); } }}```- 獲取當前路徑```jsvar currentPageUrl = "";if (typeof this.href === "undefined") { currentPageUrl = document.location.toString().toLowerCase();}else { currentPageUrl = this.href.toString().toLowerCase();}```- 獲取頁面高度```jsfunction getPageHeight(){ var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat" ? a : g.documentElement; return Math.max(f.scrollHeight, a.scrollHeight, d.clientHeight);}```- 獲取頁面可視寬度```jsfunction getPageViewWidth(){ var d = document, a = d.compatMode == "BackCompat" ? d.body: d.documentElement; return a.clientWidth;}```- 獲取頁面寬度```jsfunction getPageWidth(){ var g = document, a = g.body, f = g.documentElement, d = g.compatMode == "BackCompat"? a: g.documentElement; return Math.max(f.scrollWidth, a.scrollWidth, d.clientWidth);}```- 隨機數時間戳```jsfunction uniqueId(){ var a=Math.random,b=parseInt; return Number(new Date()).toString()+b(10*a())+b(10*a())+b(10*a());}```- 日期格式化函數```jsDate.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds(), //second "q+" : Math.floor((this.getMonth()+3)/3), //quarter "S" : this.getMilliseconds() //millisecond }; if(/(y+)/.test(format)) format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length)); for(var k in o){ if(new RegExp("("+ k +")").test(format)) format = format.replace(RegExp.$1,RegExp.$1.length==1 ? o[k] :("00"+ o[k]).substr((""+ o[k]).length)); } return format;}//調用//new Date().format("yyyy-MM-dd hh:mm:ss");```- 返回頂部的通用方法```jsfunction backTop(btnId) { var btn = document.getElementById(btnId); var d = document.documentElement; var b = document.body; window.onscroll = set; btn.style.display = "none"; btn.onclick = function() { btn.style.display = "none"; window.onscroll = null; this.timer = setInterval(function() { d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1); if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set); }, 10); }; function set() { btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none" }};backTop('goTop');```- 得到URL中GET參數值```js// 用法：若是地址是 test.htm?t1=1&t2=2&t3=3, 那麼能取得：GET["t1"], GET["t2"], GET["t3"]function get_get(){ querystr = window.location.href.split("?") if(querystr[1]){ GETs = querystr[1].split("&"); GET = []; for(i=0;i<GETs.length;i++){ tmp_arr = GETs.split("=") key=tmp_arr[0] GET[key] = tmp_arr[1] } } return querystr[1];}```- 數組去重```jsString.prototype.unique=function(){ var x=this.split(/[\r\n]+/); var y=''; for(var i=0;i<x.length;i++){ if(!new RegExp("^"+x.replace(/([^\w])/ig,"\\$1")+"$","igm").test(y)){ y+=x+"\r\n" } } return y};```- 按字典順序，對每行進行數組排序```jsfunction SetSort(){ var text=K1.value.split(/[\r\n]/).sort().join("\r\n");//順序 var test=K1.value.split(/[\r\n]/).sort().reverse().join("\r\n");//反序 K1.value=K1.value!=text?text:test;}```- 字符串反序輸出```jsfunction IsReverse(text){ return text.split('').reverse().join('');}```- 金額大寫轉換函數```js//格式轉換function transform(tranvalue) { try { var i = 1; var dw2 = new Array("", "萬", "億"); //大單位 var dw1 = new Array("拾", "佰", "仟"); //小單位 var dw = new Array("零", "壹", "貳", "叄", "肆", "伍", "陸", "柒", "捌", "玖"); //整數部分用 //如下是小寫轉換成大寫顯示在合計大寫的文本框中 //分離整數與小數 var source = splits(tranvalue); var num = source[0]; var dig = source[1]; //轉換整數部分 var k1 = 0; //計小單位 var k2 = 0; //計大單位 var sum = 0; var str = ""; var len = source[0].length; //整數的長度 for (i = 1; i <= len; i++) { var n = source[0].charAt(len - i); //取得某個位數上的數字 var bn = 0; if (len - i - 1 >= 0) { bn = source[0].charAt(len - i - 1); //取得某個位數前一位上的數字 } sum = sum + Number(n); if (sum != 0) { str = dw[Number(n)].concat(str); //取得該數字對應的大寫數字，並插入到str字符串的前面 if (n == '0') sum = 0; } if (len - i - 1 >= 0) { //在數字範圍內 if (k1 != 3) { //加小單位 if (bn != 0) { str = dw1[k1].concat(str); } k1++; } else { //不加小單位，加大單位 k1 = 0; var temp = str.charAt(0); if (temp == "萬" || temp == "億") //若大單位前沒有數字則捨去大單位 str = str.substr(1, str.length - 1); str = dw2[k2].concat(str); sum = 0; } } if (k1 == 3){ //小單位到千則大單位進一 k2++; } } //轉換小數部分 var strdig = ""; if (dig != "") { var n = dig.charAt(0); if (n != 0) { strdig += dw[Number(n)] + "角"; //加數字 } var n = dig.charAt(1); if (n != 0) { strdig += dw[Number(n)] + "分"; //加數字 } } str += "元" + strdig; } catch(e) { return "0元"; } return str;}//拆分整數與小數function splits(tranvalue) { var value = new Array('', ''); temp = tranvalue.split("."); for (var i = 0; i < temp.length; i++) { value = temp; } return value;}```