兼容随记记录的是平时遇见的兼容问题等，也是为了自己能保持记录问题的习惯。前几天做了个活动页，里面有个倒计时的需求，随后

记录的是平时遇见的兼容问题等，也是为了自己能保持记录问题的习惯。

一、关于时间转换的个问题

前几天做了个活动页，里面有个倒计时的需求，随后封装了个倒计时的函数。结果再调用传参后一个没注意就出现了问题，问题不大随手记录下，以防下次在出现类型的问题。

var setRemainTime = function(timeStr,item){
    setInterval(function(){
        var nowTime = new Date(timeStr) - new Date();
        var minutes = parseInt(nowTime / 1000 / 60 % 60,10);
        var seconds = parseInt(nowTime / 1000 % 60, 10);
        
        minutes = checkTime(minutes);
        seconds = checkTime(seconds);
        
        if(nowTime >= 0 ){
            var days = parseInt(nowTime / 1000 / 60 / 60 / 24,10);
            var hours = paresInt(nowTime / 1000 / 60 / 60 % 24,10);
            days = checkTime(days);
            hours = checkTime(hours);
            $('.dyas').text(days);
            $('.hours').text(hours);
            $('.minutes').text(minutes);
            $('.seconds').text(seconds);
        }
    },1000)
}

function checkTime(i){
    if(i< 10 ){
        i = '0' + i;
    }
    return i;
}

//调用方法时出错
var init = function(){
    setRemainTime('2019-5-1 16:00:00','day');
}
init();

以上是封装的倒计时方法，相信已经看出问题所在了。是的，在调用 setRemainTime ()方法时，传参的格式问题，虽然是字符串没错了，但是时间分割是以 ‘ - ’ 分割，导致在IE里直接显示NaN，就是因为一个不小心，不注意出现的问题，我还纠结了好一会儿。后来发现是传参的问题改正后就没有问题。

正确传参格式：

setRemainTime('2019/5/1 16:00:00','day');

二、判断否支持video标签

html5中新增了video标签，可用于播放视频，功能强大。但是当前很多浏览器还不支持，所以在使用时需要判断当前浏览器是否支持此标签。

我们的页面在不同浏览器上之所以会出现变现不同的问题，是因为不同的浏览器在解析页面时，遵循的规则并不是完全相同的。

方法一：条件注释判断浏览器版本

<div class="viedeo">
    <video id="video" controls preload="auto">
        <source src="//wan05.sogoucdn.com/cdn/video/2019/05/22/20190522163317_3460.mp4" />
        <!--<p class="err">您的浏览器不支持video标签</p> -->
     </video>
    <!-- 视频媒体标签IE6以上可识别 -->
        <!-- [if gte IE 6] -->
            <p class="err">您的浏览器不支持video标签</p>
        <![endif]-->
    <!-- 音频媒体标签 -->
        <a href="javaScript:;" class="videoMask" id="videoMask"></a>
</div>

在html页面中可以使用条件注释判断浏览器版本，可以解决IE下的兼容问题。

那条件注释有哪些：

<!-- [if !IE] --><!--> 除IE外都可识别<![endif]-->
<!-- [if IE]>所有IE外都可识别<![endif]-->
<!-- [if IE 6]> 仅IE6可识别<![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

方法二：

var supVideo = !!document.createElement('video').canPlayType;

$('#closeVideo').click(function(e){
   e.preventDefault();
   $('.gameVideo').hide();
  /*
   暂停视频
   jquery 不可以直接使用play()等方法，而是dom元素的函数
   */
    if(!supVideo){
        return;
    }
   $('#video').get(0).play();
    if ($('#video').pause) {
        // 触发被选元素的指定事件
        $('#video').trigger('play');
    }else{
        $('#video').trigger('pause');
    }     
});

在点击播放前检测浏览器是否能播放指定的音频。

canPlayType（）方法可返回下列值之一：

probably --- 浏览器可能支持该音频
maybe ---浏览器也许支持该音频
'' ---（空字符串）浏览器不支持

canPlayType（）方法所有主流浏览器都支持；

目前这两种方法都有使用到，其他更高效好用的方法还需要去发掘。三 placeholder 兼容问题 placeholder是html新增的属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框。在实践中发现jquery对 placeholder支持不是很理想，placeholder属性值时而会消失，所以建议用原生js方案。

function placeholder() {  
    var doc=document,  
        inputs=doc.getElementsByTagName('input'),  
        //浏览器input域是否支持placeholder  
        supportPlaceholder='placeholder'in doc.createElement('input'),  
        placeholder=function(input){  
            var text=input.getAttribute('placeholder'),  
            defaultValue=input.defaultValue;  
            if(defaultValue==''){  
                input.value=text  
            }  
            input.onfocus=function(){  
                if(input.value===text){  
                    this.value=''  
                }  
            };  
            input.onblur=function(){  
                if(input.value===''){  
                    this.value=text  
                }  
            }  
        };  
        if(!supportPlaceholder){  
            for(var i=0,len=inputs.length;i