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

Posted 秦雨

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了兼容移动端以及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);
}
});

});


以上是关于兼容移动端以及safary浏览器 的倒计时特效的主要内容,如果未能解决你的问题,请参考以下文章

js复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

移动端在ios上以及微信浏览器上的兼容性

移动端300ms兼容问题(移动端经典问题)

移动端兼容问题注意事项

移动端兼容性问题解决方案

移动端兼容性问题解决方案