jquery实现倒计时效果

实现的效果如图：

HTML：

  <div class="startTime">
            <p> 距离下一场活动还有</p>
            <p id="countDown"><span>--</span>时<span>--</span>分<span>--</span>秒</p>
        </div>

Jquery代码：

    //判断设备是安卓还是IOS
    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终端
    var severTime ='2018-01-24 17:03';
    var endTime ='2018-01-25 17:04';
    var dateFinal;//结束时间
    var curTime;//当前时间
    function getTime() {
        var severNow = new Date(severTime).getTime();//服务器时间
                 var dateNow = new Date().getTime();  //获取系统本地当前时间
                if(isiOS){
                    var severNow = new Date(severTime.replace(/-/g,'/')).getTime();
                }
                 D_value = severNow-dateNow;//本地与服务器的差值
                 var intervalDate = setInterval(function(){
                      countDown(endTime);
                 },1000);
    }
                 
    //倒计时
function countDown(time){
     dateFinal = new Date(time).getTime();//设置倒计时到达时间
     curTime = new Date().getTime() + D_value;

if(isiOS){ //兼容IOS
    dateFinal = new Date(time.replace(/-/g,'/')).getTime();//设置倒计时到达时间
    curTime = new Date().getTime() + D_value; 
}
  var dateSub = dateFinal - curTime  ;  //计算结束时间与开始时间差值，单位毫秒
      var timeHtml = '';
    if(dateSub<0){
        timeHtml+='<span>00</span>时<span>00</span>分<span>00</span>秒';
  $('#countDown').html(timeHtml);
        return;
    }
  var day = hour = minute = second = dayBase = hourBase = minuteBase = secondBase = 0;  //初始化各个数值
  dayBase = 24 * 60 * 60 * 1000;  //计算天数的基数，单位毫秒。1天等于24*60*60*1000毫秒
  hourBase = 60 * 60 * 1000;  //计算小时的基数，单位毫秒。1小时等于60*60*1000毫秒
  minuteBase = 60 * 1000;  //计算分钟的基数，单位毫秒。1分钟等于60*1000毫秒
  secondBase = 1000;  //计算秒钟的基数，单位毫秒。1秒钟等于1000毫秒
  day = Math.floor(dateSub / dayBase);  //计算天数，并取下限值。如 5.9天 = 5天
  hour = Math.floor(dateSub % dayBase / hourBase) + day*24;  //计算小时，并取下限值。如 20.59小时 = 20小时
  minute = Math.floor(dateSub % dayBase % hourBase / minuteBase);  //计算分钟，并取下限值。如 20.59分钟 = 20分钟
  second = Math.floor(dateSub % dayBase % hourBase % minuteBase / secondBase);  //计算秒钟，并取下限值。如 20.59秒 = 20秒
  timeHtml+='<span>'+toDouble(hour)+'</span>时<span>'+toDouble(minute)+'</span>分<span>'+toDouble(second)+'</span>秒';
  $('#countDown').empty().html(timeHtml);
    if( hour == 0 && minute == 0 && second == 0 ){
        //倒计时结束后要进行的操作
    }
}
//当小时，分钟和秒钟小于 10 的时候会显示为个位数，比较难看，需要在前面加 0。
function toDouble(num){
  if(num < 10){
    return '0'+ num;
  }else{
    return '' + num;
  }
}
    
 getTime(); 

注意点：在兼容性方面：IOS不能通过new Date().getTime()直接获取到时间的毫秒数，需要进行相应的转化一下，转化的代码：new Date(severTime.replace(/-/g,'/')).getTime()；这样在iphone上就能正常显示了