兼容移动端以及safary浏览器 的倒计时特效

html:

<!--倒计时区域--><div id="countdown"></div>

css:(可在网站查找：jquery.countdown.css)

.countdownHolder{   width:15rem;   height: 1.6rem;   margin:0 auto;   font: 1rem ‘Open Sans Condensed‘,sans-serif;   text-align:center;   letter-spacing:-3px;}

.position{   display: inline-block;   height: 1.6em;   overflow: hidden;   position: relative;   width: 1.05em;}/*动时颜色*/.digit{   position:absolute;   display:block;   width:1em;   background-color:#ff5500;   border-radius:0.2em;   text-align:center;   color:#fff;   letter-spacing:-1px;}.digit.static{   box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);

background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);   background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);   background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);   background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);   background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);   /*字体上下颜色*/   background-image: -webkit-gradient(      linear,      left bottom,      left top,      color-stop(0.5, #000),      color-stop(0.5, red)   );}

/** * You can use these classes to hide parts * of the countdown that you don‘t need. */

.countDays{ /* display:none !important;*/ }.countDiv0{ /* display:none !important;*/ }.countHours{}.countDiv1{}.countMinutes{}.countDiv2{}.countSeconds{}

.countDiv{   display:inline-block;   width:16px;   height:1.6em;   position:relative;}/*中间点的颜色*/.countDiv:before,.countDiv:after{   position:absolute;   width:5px;   height:5px;   background-color:#444;   border-radius:50%;   left:50%;   margin-left:-3px;   top:0.5em;   box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);   content:‘‘;}

.countDiv:after{   top:0.9em;}

js:（4个--1.设置顶级字体大小,原因设置移动端rem

　　　　  2.引入jquery,原因插件要用到

3.调用倒计时插件，可在网上直接下载-jquery.countdown.js

4.设置倒计时）

1.

<script type="text/javascript">    (function(){        var html = document.documentElement;        var hWidth = html.getBoundingClientRect().width;        html.style.fontSize = hWidth/16 + "px";        console.log(hWidth/16);    })();</script>

2.

<!--引入jquery--><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

3.

/** * @name      jQuery Countdown Plugin * @author    Martin Angelov * @version    1.0 * @url          http://tutorialzine.com/2011/12/countdown-jquery/ * @license       MIT License */

(function($){

// Number of seconds in every time division   var days   = 24*60*60,      hours  = 60*60,      minutes    = 60;

// Creating the plugin   $.fn.countdown = function(prop){

var options = $.extend({         callback   : function(){},         timestamp  : 0      },prop);

var left, d, h, m, s, positions;

// Initialize the plugin      init(this, options);

positions = this.find(‘.position‘);

(function tick(){

// Time left         left = Math.floor((options.timestamp - (new Date())) / 1000);

if(left < 0){            left = 0;         }

// Number of days left         d = Math.floor(left / days);         updateDuo(0, 1, d);         left -= d*days;

// Number of hours left         h = Math.floor(left / hours);         updateDuo(2, 3, h);         left -= h*hours;

// Number of minutes left         m = Math.floor(left / minutes);         updateDuo(4, 5, m);         left -= m*minutes;

// Number of seconds left         s = left;         updateDuo(6, 7, s);

// Calling an optional user supplied callback         options.callback(d, h, m, s);

// Scheduling another call of this function in 1s         setTimeout(tick, 1000);      })();

// This function updates two digit positions at once      function updateDuo(minor,major,value){         switchDigit(positions.eq(minor),Math.floor(value/10)%10);         switchDigit(positions.eq(major),value%10);      }

return this;   };

function init(elem, options){      elem.addClass(‘countdownHolder‘);

// Creating the markup inside the container      $.each([‘Days‘,‘Hours‘,‘Minutes‘,‘Seconds‘],function(i){         $(‘<span class="count‘+this+‘">‘).html(            ‘<span class="position">\               <span class="digit static">0</span>\            </span>\            <span class="position">\               <span class="digit static">0</span>\            </span>‘         ).appendTo(elem);

if(this!="Seconds"){            elem.append(‘<span class="countDiv countDiv‘+i+‘"></span>‘);         }      });

}

// Creates an animated transition between the two numbers   function switchDigit(position,number){

var digit = position.find(‘.digit‘)

if(digit.is(‘:animated‘)){         return false;      }

if(position.data(‘digit‘) == number){         // We are already showing this number         return false;      }

position.data(‘digit‘, number);

var replacement = $(‘<span>‘,{         ‘class‘:‘digit‘,         css:{            top:‘-2.1em‘,            opacity:0         },         html:number      });

// The .static class is added when the animation      // completes. This makes it run smoother.

digit         .before(replacement)         .removeClass(‘static‘)         .animate({top:‘2.5em‘,opacity:0},‘fast‘,function(){            digit.remove();         })

replacement         .delay(100)         .animate({top:0,opacity:1},‘fast‘,function(){            replacement.addClass(‘static‘);         });   }})(jQuery);

4.

$(function(){

var note = $(‘#note‘),      ts = new Date(2017, 3, 30,14),//月份设置时减一      newYear = true;   if((new Date()) > ts){      // The new year is here! Count towards something else.      // Notice the *1000 at the end - time must be in milliseconds      ts = (new Date()).getTime() + 10*24*60*60*1000;      newYear = false;   }

$(‘#countdown‘).countdown({      timestamp  : ts,      callback   : function(days, hours, minutes, seconds){

var message = "";

message += days + " day" + ( days==1 ? ‘‘:‘s‘ ) + ", ";         message += hours + " hour" + ( hours==1 ? ‘‘:‘s‘ ) + ", ";         message += minutes + " minute" + ( minutes==1 ? ‘‘:‘s‘ ) + " and ";         message += seconds + " second" + ( seconds==1 ? ‘‘:‘s‘ ) + " <br />";

if(newYear){            message += "left until the new year!";         }         else {            message += "left to 10 days from now!";         }

note.html(message);      }   });

});