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

Posted 2020-09-09 秦雨

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);
      }
   });
   
});