倒计时

<div id="time" class="shine_red">
    <ul>
        <li id="day">00</li>
        <li id="hours">00</li>
        <li id="mins">00</li>
        <li id="seconds">00</li>
        <li id="minisec" style="display:none">000</li>
    </ul>
</div>

css

#time {
color:#fff;
font-size:0.8rem;
padding:0 5px;
position: absolute;
/*width: 350px;*/
width: auto;
left: 27%;
top: 78%;
height: 30px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}


#time ul{
list-style: none;margin: 0;padding: 0;
}
#time ul li{display: inline-block;margin: 0 2px;}
.shine_red {
-webkit-animation-name: shineRed;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes shineRed {
from {
-webkit-box-shadow: 0 0 5px #bbb;
    }
50% {
-webkit-box-shadow: 0 0 10px red;
    }
to {
-webkit-box-shadow: 0 0 5px #bbb;
    }
}

 

js

<script src="js/jquery.js"></script>
<!--<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>-->
<script type="text/javascript">
$(function () {
$("#time").css({
"left": Math.ceil(($("#content").width() - $("#time").width()) / 2)
        })
    });

var d1, d2, day, h, m, s, ms, d1ms, d2ms, dms, hms, mms;
dms = 1000 * 60 * 60 * 24;
hms = 1000 * 60 * 60;
mms = 1000 * 60;
function counter() {
d1 = new Date(2016, 0, 22, 23, 59, 59);
d2 = new Date();
d1ms = d1.getTime();
d2ms = d2.getTime();
ms = d1ms - d2ms;
if (ms <= 0) {
day = 00;
h = 00;
m = 00;
s = 00;
ss = 0 % 1000;
        }
else {
day = Math.floor(ms / dms);
h = Math.floor(ms % dms / hms);
m = Math.floor(ms % hms / mms);
s = Math.floor(ms % mms / 1000);
var ss = Math.floor(ms % 1000);
$('#day').html('<span class="yellow">' + day + '</span>天');
$('#hours').html('<span class="yellow">' + h + '</span>时');
$('#mins').html('<span class="yellow">' + m + '</span>分');
$('#seconds').html('<span class="yellow">' + s + '</span>秒');
        }
if (day <= 9) {
$('#day').html('<span class="yellow">0' + day + '</span>天');//0n
} else {
$('#day').html('<span class="yellow">' + day + '</span>天');//nn
}
if (h <= 9) {
$('#hours').html('<span class="yellow">0' + h + '</span>时');
        } else {
$('#hours').html('<span class="yellow">' + h + '</span>时');
        }
if (m <= 9) {
$('#mins').html('<span class="yellow">0' + m + '</span>分');
        } else {
$('#mins').html('<span class="yellow">' + m + '</span>分');
        }
if (s <= 9) {
$('#seconds').html('<span class="yellow">0' + s + '</span>秒');
        } else {
$('#seconds').html('<span class="yellow">' + s + '</span>秒');
        }
document.getElementById('minisec').innerHTML = ss;
    }
counter();
window.setInterval("counter()", 1);
//-->
</script>