1. parseInt(“08”),parseInt("09") 輸出0 (IE 8)
? ?使用parseInt("08",10)
2.?不支持indexOf (IE 8)
? ?? if(!Array.indexOf){
? ? ? ?Array.prototype.indexOf = function(obj){
? ? ? ? for(var i=0; i<this.length; i++){
? ? ? ? ? ? if(this[i]==obj){
? ? ? ? ? ? ? ? return i;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return -1;
? ? }
?}
3. toFixed 不四舍五入
function changeDecimal(num, bitNum) {
? ? var bb = num+"";?
? ? var dian = bb.indexOf('.');?
? ? var result = "";?
? ? if(dian == -1){?
? ? ? ? result =? num.toFixed(bitNum);?
? ? }else{?
? ? ? ? var cc = bb.substring(dian+1,bb.length);?
? ? ? ? if(cc.length >=bitNum){?
? ? ? ? ? ? result =bb.substring(0,dian+bitNum+1)
? ? ? ? ? ? //result =? (Number(num.toFixed(bitNum))+0.01)*100000000000/100000000000;//js小數(shù)計算小數(shù)點后顯示多位小數(shù)?
? ? ? ? }else{?
? ? ? ? ? ? result =? num.toFixed(bitNum);?
? ? ? ? }?
? ? }?
? ? return result;
}
4.??左右滾動廣告
window.setInterval(function () {
? ? ? ? var context = $("#broadcast_content");
? ? ? ? var left = parseFloat(context.css('left'));
? ? ? ? var length = context.text().length * 18*(-1);//18wei為font-size
? ? ? ? if (left > length) {
? ? ? ? ? ? context.css({ "left": left - 1 });
? ? ? ? } else {
? ? ? ? ? ? context.css({ "left":"450px"});//可見kuang框kuandu
? ? ? ? }
? ? }, 40);
5.隨機抽獎
(function(){
function rd(n,m){
? ? var c = m-n+1;
? ? return Math.floor(Math.random() * c + n);
}
? ? setInterval(function getRandomInfo(){
? var ln ="趙,錢,孫,李,周,吳,鄭,王,馮,陳,楮,衛(wèi),蔣,沈,韓,楊,朱,秦,尤,許,何,呂,施,張,孔,曹,嚴,華,金,魏,陶,姜,戚,謝,鄒,喻,柏,水,竇,章,云,蘇,潘,葛,奚,范,彭,郎,魯,韋,昌,馬,苗,鳳,花,方,俞,任,袁,柳,酆,鮑,史,唐,費,廉,岑,薛,雷,賀,倪,湯,滕,殷,羅,畢,郝,鄔,安,常,樂,于,時,傅,皮,卞,齊,康,伍,余,元,卜,顧,孟,平,黃,和,穆,蕭,尹,姚,邵,湛,汪,祁,毛,禹,狄,米,貝,明,臧,計,伏,成,戴,談,宋,茅,龐,熊,紀,舒,屈,項,祝,董,梁,杜,阮,藍,閩,席,季,麻,強,賈,路,婁,危,江,童,顏,郭,梅,盛,林,刁,鍾,徐,丘,駱,高,夏,蔡,田,樊,胡,凌,霍,虞,萬,支,柯,昝,管,盧,莫,經,房,裘,繆,干,解,應,宗,丁,宣,賁,鄧,郁,單,杭,洪,包,諸,左,石,崔,吉,鈕,龔,程,嵇,邢,滑,裴,陸,榮,翁,荀,羊,於,惠,甄,麹,家,封,芮,羿,儲,靳,汲,邴,糜,松,井,段,富,巫,烏,焦,巴,弓,牧,隗,山,谷,車,侯,宓,蓬,全,郗,班,仰,秋,仲,伊,宮,寧,仇,欒,暴,甘,斜,厲,戎,祖,武,符,劉,景,詹,束,龍,葉,幸,司,韶,郜,黎,薊,薄,印,宿,白,懷,蒲,邰,從,鄂,索,咸,籍,賴,卓,藺,屠,蒙,池,喬,陰,郁,胥,能,蒼,雙,聞,莘,黨,翟,譚,貢,勞,逄,姬,申,扶,堵,冉,宰,酈,雍,郤,璩,桑,桂,濮,牛,壽,通,邊,扈,燕,冀,郟,浦,尚,農,溫,別,莊,晏,柴,瞿,閻,充,慕,連,茹,習,宦,艾,魚,容,向,古,易,慎,戈,廖,庾,終,暨,居,衡,步,都,耿,滿,弘,匡,國,文,寇,廣,祿,闕,東,歐,殳,沃,利,蔚,越,夔,隆,師,鞏,厙,聶,晁,勾,敖,融,冷,訾,辛,闞,那,簡,饒,空,曾,毋,沙,乜,養(yǎng),鞠,須,豐,巢,關,蒯,相,查,后,荊,紅,游,竺,權,逑,蓋,益,桓,公,萬俟,司馬,上官,歐陽,夏侯,諸葛,聞人,東方,赫連,皇甫,尉遲,公羊,澹臺,公冶,宗政,濮陽,淳于,單于,太叔,申屠,公孫,仲孫,軒轅,令狐,鍾離,宇文,長孫,慕容,鮮于,閭丘,司徒,司空,丌官,司寇,仉,督,子車,顓孫,端木,巫馬,公西,漆雕,樂正,壤駟,公良,拓拔,夾谷,宰父,谷梁,晉,楚,閻,法,汝,鄢,涂,欽,段干,百里,東郭,南門,呼延,歸,海,羊舌,微生,岳,帥,緱,亢,況,后,有,琴,梁丘,左丘,東門,西門,商,牟,佘,佴,伯,賞,南宮,墨,哈,譙,笪,年,愛,陽,佟";
? var nameList = ln.split(',');
? var gender = ["先生","女士"];
? var multiple = rd(3,6);
? var result = nameList[rd(0,nameList.length-1)] + gender[rd(0,1)]+' 抽到了幸運獎'+multiple+'個神兜兜';
? console.log(result);
},1000)
}
)();
6.字符串和數(shù)字之間的隱式強制類型轉換 (from 你不知道的javascript)
var a = "42";
var b = "0";
var c = 42;
var d = 0;
a + b; // "420"
c + d; // 42
var a = [1,2];
var b = [3,4];
a + b; // "1,23,4"
var a = 42;
var b = a + "";
b; // "42"
//a + ""(隱式)和前面的String(a)(顯式)之間有一個細微的差別需要注意。根據(jù)
//ToPrimitive 抽象操作規(guī)則蛀缝,a + "" 會對a 調用valueOf() 方法,然后通過ToString 抽象
//操作將返回值轉換為字符串酒唉。而String(a) 則是直接調用ToString()存皂。
//它們最后返回的都是字符串,但如果a 是對象而非數(shù)字結果可能會不一樣!
var a = {
valueOf: function() { return 42; },
toString: function() { return 4; }
};
a + ""; // "42"
String( a ); // "4"
var a = [3];
var b = [1];
a - b; // 2
//為了執(zhí)行減法運算侧戴,a 和b 都需要被轉換為數(shù)字宁昭,它們首先被轉換為字符串(通過
//強制類型轉換 toString()),然后再轉換為數(shù)字酗宋。
7.全局DOM 變量 (from 你不知道的javascript)
在創(chuàng)建帶有id 屬性
的DOM 元素時也會創(chuàng)建同名的全局變量积仗。例如:
<div id="foo"></div>
以及:
if (typeof foo == "undefined") {
foo = 42; // 永遠也不會運行
}
console.log( foo ); // HTML元素
8.滾動定位到指定位置
$("html,body").animate({scrollTop:$("#" + id).offset().top}, 800); //動態(tài)獲取元素的高度在滾動至該高度
9.動態(tài)設置字體大小(rem)
? ?設置meta: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
? ? var calculate_size = function() {
? ? ? ? ? ? // var BASE_FONT_SIZE = 100;
? ? ? ? ? ? var docEl = document.documentElement,
? ? ? ? ? ? ? ? clientWidth = document.querySelector(".container").clientWidth;
? ? ? ? ? ? if (!clientWidth) return;
? ? ? ? ? ? docEl.style.fontSize = (clientWidth / 10) + 'px';
? ? ? ? };
? ? ? ? // Abort if browser does not support addEventListener
? ? ? ? if (document.addEventListener) {
? ? ? ? ? ? var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
? ? ? ? ? ? window.addEventListener(resizeEvt, calculate_size, false);
? ? ? ? ? ? document.addEventListener('DOMContentLoaded', calculate_size, false);
? ? ? ? ? ? calculate_size();
? ? ? ? }
10.格式化金額
//計算器
function fmoney(s, n) {
? ? n = n > 0 && n <= 20 ? n : 2;
? ? s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
? ? var l = s.split(".")[0].split("").reverse(),
? ? r = s.split(".")[1];
? ? t = "";
? ? for (i = 0; i < l.length; i++) {
? ? ? ? t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
? ? }
? ? return t.split("").reverse().join("");
? ? //return t.split("").reverse().join("") + "." + r;
}
function GetMoney(moneyval) {
? ? var fomatmoney = "";
? ? var reg = new RegExp(",", "g"); //創(chuàng)建正則RegExp對象?
? ? moneyval = moneyval.replace(reg, "");
? ? if (moneyval.length > 9) {
? ? ? ? moneyval = parseInt(moneyval / 100) + "";
? ? }
? ? if (isNaN(moneyval) || moneyval == "") {
? ? ? ? document.getElementById("moneytxt").value = "";
? ? ? ? document.getElementById("money").innerHTML = "0";
? ? ? ? return;
? ? }
? ? if (isNaN(moneyval) || moneyval.length < 1) {
? ? ? ? if (parseFloat(moneyval) < 1) {
? ? ? ? ? ? alert("數(shù)字不能小于1蜕猫!");
? ? ? ? ? ? return;
? ? ? ? }
? ? ? ? alert("請輸入數(shù)字斥扛!");
? ? ? ? return;
? ? }
? ? if (moneyval === " ") {
? ? ? ? console.log("error");
? ? ? ? document.getElementById("moneytxt").value = "";
? ? ? ? return;
? ? }
? ? var fomatmoney = fmoney(moneyval, 0);
? ? document.getElementById("moneytxt").value = fomatmoney;
? ? document.getElementById("money").innerHTML = parseInt(moneyval * 5 / 1000) > 50000?50000:parseInt(moneyval * 5 / 1000);
? ? //if (isNaN(moneyval) || moneyval.length < 4) {
? ? //? ? document.getElementById("money").innerHTML = parseInt(0);
? ? //}
}
11.判斷iframe是否加載成功:
? iframe.onload = function(){
var that = $(this)[0];
try{
that.contentDocument;
}
catch(err){
//TODO
}
}
12.Knockout 使用jquery直接賦值不被監(jiān)聽
? ?使用change方法: $("#id").val("testValue").change()
13.點擊其他區(qū)域關閉某區(qū)域
$(document).mouseup(function(e){
? var _con = $(' 目標區(qū)域 ');? // 設置目標區(qū)域
? if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
? ? some code...? // 功能代碼
? }
});
/* Mark 1 的原理:
判斷點擊事件發(fā)生在區(qū)域外的條件是:
1. 點擊事件的對象不是目標區(qū)域本身
2. 事件對象同時也不是目標區(qū)域的子元素
*/
14.圖片轉blob,base64 (React Croper)
<AvatarSelector
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? src={this.props.profileSettings.photo}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? onChange={this.onAvatarSelectorChange}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? onChangeIllegalType={this.onChangeIllegalType}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? inputProps={{name: 'wort-wort-wort'}}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? isLoading={this.props.profileSettings.isLoading}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? size = "150px"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? />
<div onClick = {this.chooseImg}>
? ? ? ? ? ? <ReactCrop
? ? ? ? ? ? ? ? ? ? src={this.state.src}
? ? ? ? ? ? ? ? ? ? crop={this.state.crop}
? ? ? ? ? ? ? ? ? ? onImageLoaded={this.onImageLoaded}
? ? ? ? ? ? ? ? ? ? onComplete={this.onCropComplete}
? ? ? ? ? ? ? ? ? ? onChange={this.onCropChange}
? ? ? ? ? ? ? ? />
</div>
onCropChange = (crop:any) => {
? ? ? ? this.setState({crop:crop});
};
onImageLoaded = (image:any):void => {
? ? ? ? this.imageRef = image;
};
onCropComplete = async (crop:any, pixelCrop:any) => {
? ? ? ? if (crop.width && crop.height) {
? ? ? ? ? const croppedImageUrl = await this.getCroppedImg(
? ? ? ? ? ? this.imageRef,
? ? ? ? ? ? pixelCrop,
? ? ? ? ? ? 'newFile.jpeg',
? ? ? ? ? );
? ? ? ? ? this.setState({croppedImageUrl:croppedImageUrl });
? ? ? ? }
? ? ? };
chooseImg = (e:any)=>{
? ? ? ? e.preventDefault();
? ? ? ? let now = new Date().getTime();
? ? ? ? if( now - this.touchTime < 500){
? ? ? ? ? ? this.touchTime = now;
? ? ? ? ? ? this.handlePhotoChange();
? ? ? ? }else{
? ? ? ? ? ? this.touchTime = now;
? ? ? ? }
? ? ? ? // this.resetValidation();
? ? }
getCroppedImg(image:any, pixelCrop:any, fileName:any) {
? ? ? ? const canvas = document.createElement('canvas');
? ? ? ? canvas.width = pixelCrop.width;
? ? ? ? canvas.height = pixelCrop.height;
? ? ? ? const ctx = canvas.getContext('2d');
? ? ? ? (ctx as any).drawImage(
? ? ? ? ? image,
? ? ? ? ? pixelCrop.x,
? ? ? ? ? pixelCrop.y,
? ? ? ? ? pixelCrop.width,
? ? ? ? ? pixelCrop.height,
? ? ? ? ? 0,
? ? ? ? ? 0,
? ? ? ? ? pixelCrop.width,
? ? ? ? ? pixelCrop.height,
? ? ? ? );
? ? ? ? return new Promise((resolve, reject) => {
? ? ? ? ? canvas.toBlob((blob:any) => {
? ? ? ? ? ? blob.name = fileName;
? ? ? ? ? ? this.imageBlob = blob;
? ? ? ? ? ? window.URL.revokeObjectURL(this.fileUrl);
? ? ? ? ? ? this.fileUrl = window.URL.createObjectURL(blob);
? ? ? ? ? ? //Convert to base64
? ? ? ? ? ? var dataURL = canvas.toDataURL('image/png');
? ? ? ? ? ? this.base64Url = dataURL;
? ? ? ? ? ? resolve(this.base64Url);
? ? ? ? ? }, 'image/jpeg');
? ? ? ? });
? ? ? }
15.倒計時
function show_timese(t1, now, target) {//目標時間,現(xiàn)在時間,目標元素
? ? var temp;
? ? if (t1 - now > 0) {
? ? ? ? temp = t1 - now;
? ? } else {
? ? ? ? temp = 1;
? ? }
? ? // 天
? ? var int_day = Math.floor(temp / 86400000)
? ? temp -= int_day * 86400000;
? ? // 時
? ? var int_hour = Math.floor(temp / 3600000)
? ? temp -= int_hour * 3600000;
? ? // 分
? ? var int_minute = Math.floor(temp / 60000)
? ? temp -= int_minute * 60000;
? ? // 秒
? ? var int_second = Math.floor(temp / 1000)
? ? }
? ? //調用
? ? setInterval(function() {
? ? ? ? show_timese(time1, time_now, target);
? ? }, 60000)
16.js動態(tài)加載
var JsLoader = function(sUrl, fCallback) {
? ? var _script = document.createElement('script');
? ? _script.setAttribute('type', 'text/javascript');
? ? _script.setAttribute('src', sUrl);
? ? document.getElementsByTagName('head')[0].appendChild(_script);
? ? if (_script.addEventListener) {
? ? ? ? _script.onload = function() {
? ? ? ? ? ? _script.parentNode.removeChild(_script);
? ? ? ? ? ? fCallback && fCallback();
? ? ? ? }
? ? } else if (_script.readyState) {
? ? ? ? _script.onreadystatechange = function() {
? ? ? ? ? ? if (_script.readyState == 'loaded' || _script.readyState == 'complete') {
? ? ? ? ? ? ? ? _script.onreadystatechange = null;
? ? ? ? ? ? ? ? _script.parentNode.removeChild(_script);
? ? ? ? ? ? ? ? fCallback && fCallback();
? ? ? ? ? ? }
? ? ? ? }
? ? } else {
? ? ? ? _script.parentNode.removeChild(_script);
? ? }
};
17.獲取特定url鏈接屬性
function getQueryString(name) {
? ? ? ? ? ? ? ? var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
? ? ? ? ? ? ? ? var r = window.location.search.substr(1).match(reg);
? ? ? ? ? ? ? ? if (r != null) return unescape(r[2]);
? ? ? ? ? ? ? ? return null;
? ? ? }
18. svg在ie下做背景圖得時候background-position失效
檢查svg是否設置了width,height及合適得viewbox
19.Git 倒出帶歷史記錄的repo
gitremote add origin? XXXXXXXXX
gitpush -u origin –all
在本地創(chuàng)建分支dev并切換到該分支
git checkout -b dev(本地分支名稱) origin/dev(遠程分支名稱)
20.chrome設置跨域
新建一個chrome快捷方式丹锹,右擊屬性稀颁,快捷方式,目標楣黍,添加?--disable-web-security --user-data-dir="C:/blabla"
("C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C:/blabla")
21.Print
? ? ? 1) new window
????????let html = document.querySelector(".print-area").innerHTML;
? ? ? ? let myWindow=window.open('','','width='+(window.screen.availWidth-10)+',height='+(window.screen.availHeight-30)+',top=0,left=0,toolbars=no,scrollbars=no,status=no');
? ? ? ? myWindow.document.write(html);
? ? ? ? myWindow.document.close();
? ? ? ? myWindow.focus();
? ? ? ? myWindow.print();
? ? ? ? myWindow.close();
? ?1) Iframe
? ?? ??????var?iframe=document.getElementById("print-iframe")?as?any;
????????????if(!iframe){??
????????????????????//?var?el?=?document.getElementById("printcontent");
????????????????????iframe?=?document.createElement('IFRAME');
????????????????????var?doc?=?null;
????????????????????iframe.setAttribute("id",?"print-iframe");
????????????????????iframe.setAttribute('style',?'position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
????????????????????document.body.appendChild(iframe);
????????????????????doc?=?iframe.contentWindow.document;
????????????????????//這里可以自定義樣式
????????????????????//doc.write("<LINK?rel="stylesheet"?type="text/css"?href="css/print.css">");
????????????????????doc.write('<div>'?+?document.documentElement.innerHTML?+?'</div>');
????????????????????doc.close();
????????????????????iframe.contentWindow.focus();????????????
????????????}
????????????iframe.contentWindow.print();
????????????if?(navigator.userAgent.indexOf("MSIE")?>?0){
? ? ? ? ? ? ? ? ?document.body.removeChild(iframe);
????????????}
22. Email outlook 圓角
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{marketplaceUrl}}" style="border-radius:8px;v-text-anchor:middle;width:166px;height:45px;" arcsize="10%" strokecolor="#ffffff" strokeweight ="0px" fillcolor="#002A3E"> <v:stroke dashstyle="solid" /> <w:anchorlock/> <center style="color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:11pt;font-weight:bold;">Go to Marketplace</center> </v:roundrect>
<![endif]-->
<!--[if !mso]> <!---->
<table style="background-color:#002A3E;border-radius:5px;border:none;display:inline-block;font-size:16px;font-weight:normal;letter-spacing:0px;line-height:16px;padding:11px 12px 11px 12px;font-weight:600"> <tr> <td> <a style="color:#FFF;text-decoration:none" href={{marketplaceUrl}} target="_blank">Go to Marketplace</a> </td> </tr> </table>
<!-- <![endif]-->