您的位置：首页 > Web前端 > JavaScript

JS写的倒计时功能 - 修改过部分Bug

2016-01-14 22:14 676 查看

醉了，刚刚本来写好了，突然拽进来一个txt文件，把我写的文章覆盖了，唉，这次简写，不废话了。

效果就是上面，具体请下载源码：

源码下载

代码：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒计时秒针特效</title>

<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" />
<link rel="stylesheet" href="assets/css/styles.css" />
<link rel="stylesheet" href="assets/countdown/jquery.countdown.css" />

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>

<div id="countdown"></div>

<p id="note"></p>

<div style="text-align:center;clear:both; font-size:12px; margin-top:100px;"></div>
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/countdown/jquery.countdown.js"></script>
<script src="assets/js/script.js"></script>

</body>
</html>

script.js

$(function () {
var note = $('#note'),
newYear = true;
//结束时间
ts = new Date('2016/1/15 22:00');

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() ;//(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 += "<span style='color:green'>倒计时进行中</span>";
}
else {
message += "<span style='color:red'>倒计时结束</span>";
}

note.html(message);
//console.log(message);
}
});

});

jquery.countdown.js

(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(){

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

if(left < 0){
left = 0;
}
//console.log("left:"+left);
// 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){
console.log(this);
$('<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);

jquery.countdown.css

.countdownHolder{
width:600px;
margin:0 auto;
font: 56px/1.5 '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:0.9em;
background-color:#444;
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, #3A3A3A),
color-stop(0.5, #444444)
);
}

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

styles.css

/*-------------------------
Simple reset
--------------------------*/

*{
margin:0;
padding:0;
}

/*-------------------------
General Styles
--------------------------*/

html{
background:url('../img/tile_bg.jpg') #b0b0b0;
position:relative;
}

body{
background:url('../img/page_bg_center.jpg') no-repeat center center;
min-height: 600px;
padding: 200px 0 0;
font:14px/1.3 'Segoe UI',Arial, sans-serif;
}

a, a:visited {
text-decoration:none;
outline:none;
color:#54a6de;
}

a:hover{
text-decoration:underline;
}

section, footer{
display: block;
}

/*----------------------------
Main Section
-----------------------------*/

#note{
color: #666666;
font-size: 12px;
margin: 0 auto;
padding: 4px;
text-align: center;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
width: 400px;
}

/*----------------------------
The Footer
-----------------------------*/

footer{
background-color: #111111;
bottom: 0;
box-shadow: 0 -1px 2px #111111;
height: 45px;
left: 0;
position: fixed;
width: 100%;
z-index: 100000;
}

footer h2{
color: #EEEEEE;
font-size: 14px;
font-weight: normal;
left: 50%;
margin-left: -400px;
padding: 13px 0 0;
position: absolute;
width: 540px;
}

footer h2 i{
font-style:normal;
color:#888;
}

footer a.tzine,a.tzine:visited{
color: #999999;
font-size: 12px;
left: 50%;
margin: 16px 0 0 110px;
position: absolute;
text-decoration: none;
top: 0;
}

footer a i{
color:#ccc;
font-style: normal;
}

footer a i b{
color:#c92020;
font-weight: normal;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航