工作中遇到的一些IE兼容性/JS问题收集整理

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

            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小数计算小数点后显示多位小数 

        }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 ="赵,钱,孙,李,周,吴,郑,王,冯,陈,楮,卫,蒋,沈,韩,杨,朱,秦,尤,许,何,吕,施,张,孔,曹,严,华,金,魏,陶,姜,戚,谢,邹,喻,柏,水,窦,章,云,苏,潘,葛,奚,范,彭,郎,鲁,韦,昌,马,苗,凤,花,方,俞,任,袁,柳,酆,鲍,史,唐,费,廉,岑,薛,雷,贺,倪,汤,滕,殷,罗,毕,郝,邬,安,常,乐,于,时,傅,皮,卞,齐,康,伍,余,元,卜,顾,孟,平,黄,和,穆,萧,尹,姚,邵,湛,汪,祁,毛,禹,狄,米,贝,明,臧,计,伏,成,戴,谈,宋,茅,庞,熊,纪,舒,屈,项,祝,董,梁,杜,阮,蓝,闽,席,季,麻,强,贾,路,娄,危,江,童,颜,郭,梅,盛,林,刁,锺,徐,丘,骆,高,夏,蔡,田,樊,胡,凌,霍,虞,万,支,柯,昝,管,卢,莫,经,房,裘,缪,干,解,应,宗,丁,宣,贲,邓,郁,单,杭,洪,包,诸,左,石,崔,吉,钮,龚,程,嵇,邢,滑,裴,陆,荣,翁,荀,羊,於,惠,甄,麹,家,封,芮,羿,储,靳,汲,邴,糜,松,井,段,富,巫,乌,焦,巴,弓,牧,隗,山,谷,车,侯,宓,蓬,全,郗,班,仰,秋,仲,伊,宫,宁,仇,栾,暴,甘,斜,厉,戎,祖,武,符,刘,景,詹,束,龙,叶,幸,司,韶,郜,黎,蓟,薄,印,宿,白,怀,蒲,邰,从,鄂,索,咸,籍,赖,卓,蔺,屠,蒙,池,乔,阴,郁,胥,能,苍,双,闻,莘,党,翟,谭,贡,劳,逄,姬,申,扶,堵,冉,宰,郦,雍,郤,璩,桑,桂,濮,牛,寿,通,边,扈,燕,冀,郏,浦,尚,农,温,别,庄,晏,柴,瞿,阎,充,慕,连,茹,习,宦,艾,鱼,容,向,古,易,慎,戈,廖,庾,终,暨,居,衡,步,都,耿,满,弘,匡,国,文,寇,广,禄,阙,东,欧,殳,沃,利,蔚,越,夔,隆,师,巩,厍,聂,晁,勾,敖,融,冷,訾,辛,阚,那,简,饶,空,曾,毋,沙,乜,养,鞠,须,丰,巢,关,蒯,相,查,后,荆,红,游,竺,权,逑,盖,益,桓,公,万俟,司马,上官,欧阳,夏侯,诸葛,闻人,东方,赫连,皇甫,尉迟,公羊,澹台,公冶,宗政,濮阳,淳于,单于,太叔,申屠,公孙,仲孙,轩辕,令狐,锺离,宇文,长孙,慕容,鲜于,闾丘,司徒,司空,丌官,司寇,仉,督,子车,颛孙,端木,巫马,公西,漆雕,乐正,壤驷,公良,拓拔,夹谷,宰父,谷梁,晋,楚,阎,法,汝,鄢,涂,钦,段干,百里,东郭,南门,呼延,归,海,羊舌,微生,岳,帅,缑,亢,况,后,有,琴,梁丘,左丘,东门,西门,商,牟,佘,佴,伯,赏,南宫,墨,哈,谯,笪,年,爱,阳,佟";

  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.字符串和数字之间的隐式强制类型转换 (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)（显式）之间有一个细微的差别需要注意。根据

//ToPrimitive 抽象操作规则，a + "" 会对a 调用valueOf() 方法，然后通过ToString 抽象

//操作将返回值转换为字符串。而String(a) 则是直接调用ToString()。

//它们最后返回的都是字符串，但如果a 是对象而非数字结果可能会不一样！

var a = {

valueOf: function() { return 42; },

toString: function() { return 4; }

};

a + ""; // "42"

String( a ); // "4"

var a = [3];

var b = [1];

a - b; // 2

//为了执行减法运算，a 和b 都需要被转换为数字，它们首先被转换为字符串（通过

//强制类型转换 toString()），然后再转换为数字。

7.全局DOM 变量 (from 你不知道的javascript)

在创建带有id 属性

的DOM 元素时也会创建同名的全局变量。例如：

以及：

if (typeof foo == "undefined") {

foo = 42; // 永远也不会运行

}

console.log( foo ); // HTML元素

8.滚动定位到指定位置

$("html,body").animate({scrollTop:$("#" + id).offset().top}, 800); //动态获取元素的高度在滚动至该高度

9.动态设置字体大小（rem）

   设置meta:

    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"); //创建正则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("数字不能小于1！");

            return;

        }

        alert("请输入数字！");

        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直接赋值不被监听

   使用change方法： $("#id").val("testValue").change()

13.点击其他区域关闭某区域

$(document).mouseup(function(e){

  var _con = $(' 目标区域 ');  // 设置目标区域

  if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1

    some code...  // 功能代码

  }

});

/* Mark 1 的原理：

判断点击事件发生在区域外的条件是：

1. 点击事件的对象不是目标区域本身

2. 事件对象同时也不是目标区域的子元素

*/

14.图片转blob,base64 (React Croper)

                                    src={this.props.profileSettings.photo}

                                    onChange={this.onAvatarSelectorChange}

                                    onChangeIllegalType={this.onChangeIllegalType}

                                    inputProps={{name: 'wort-wort-wort'}}

                                    isLoading={this.props.profileSettings.isLoading}

                                    size = "150px"

                                />

           

                    src={this.state.src}

                    crop={this.state.crop}

                    onImageLoaded={this.onImageLoaded}

                    onComplete={this.onCropComplete}

                    onChange={this.onCropChange}

                />

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) {//目标时间,现在时间，目标元素

    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动态加载

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

在本地创建分支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("");

                    doc.write('

' + document.documentElement.innerHTML + '

');

                    doc.close();

                    iframe.contentWindow.focus();            

            }

            iframe.contentWindow.print();

            if (navigator.userAgent.indexOf("MSIE") > 0){

                 document.body.removeChild(iframe);

            }

22. Email outlook 圆角

Go to Marketplace