我尝试组合一个应该倒计时到每天 16:00 点的计时器。但它会首先说 24:00 之后有多少小时、分钟和秒。
这对我来说很难解释,所以我希望可以在我的代码示例中发现:
(function($){
var start = new Date;
start.setHours(16, 0, 0); // 16pm
var dataDate = start;
var countdown = {
END_DATE: Date.parse(dataDate),
END_DATE_MESSAGE: "",
NOW: new Date(),
count: 3,
padding: 20,
circleSize: 150,
border: 20,
update: 1,
circles: {
HOURS: {
title: "HOURS",
seconds: 3600000,
max: 24,
color: '#FF3333'
},
MINUTES: {
title: "MINUTES",
seconds: 60000,
max: 60,
color: '#FF3333'
},
SECONDS: {
title: "SECONDS",
seconds: 1000,
max: 60,
color: '#FF3333'
}
},
init: function () {
countdown.canvas = document.createElement('canvas');
countdown.ctx = countdown.canvas.getContext('2d');
countdown.size = {
w: ((countdown.circleSize + countdown.border) * countdown.count + (countdown.padding * (countdown.count - 1))),
h: (countdown.circleSize + countdown.border + countdown.padding * 5)
};
countdown.canvas.setAttribute('width', countdown.size.w);
countdown.canvas.setAttribute('height', countdown.size.h);
$("#countdown").append(countdown.canvas);
countdown.ctx.textAlign = 'center';
countdown.actualSize = countdown.circleSize + countdown.border;
countdown.TIME_LEFT = new Date(countdown.END_DATE).getTime();
var INTERVAL = setInterval(function(){
var NOW = new Date();
if (NOW < countdown.END_DATE ) {
countdown.start();
} else {
//countdown.END_DATE.setDate(END_DATE.getDate() + 1);
countdown.completed();
}
}, countdown.update);
},
start: function () {
// this clears the redraw text issue after loading the intel font
countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
var idx = 0;
countdown.time = (new Date().getTime()) - countdown.TIME_LEFT;
for (var key in countdown.circles) {
countdown.draw(idx++, key, countdown.circles[key], countdown.circles[key].color);
}
},
draw: function (idx, label, circle, color) {
var x, y, value,
circleSeconds = circle.seconds;
value = parseFloat(countdown.time / circleSeconds);
countdown.time -= Math.round(parseInt(value)) * circleSeconds;
value = Math.abs(value);
x = (countdown.circleSize * .5 + countdown.border * .5);
x += (idx * (countdown.circleSize + countdown.padding + countdown.border));
y = countdown.circleSize * .5;
y += countdown.border * .5;
var degrees = 360 - (value / circle.max) * 360.0;
var endAngle = degrees * (Math.PI / 180);
countdown.ctx.save();
countdown.ctx.translate(x, y);
countdown.ctx.clearRect(countdown.actualSize * -0.5, countdown.actualSize * -0.5, countdown.actualSize, countdown.actualSize);
// OUTLINE
countdown.ctx.beginPath();
countdown.ctx.strokeStyle = "rgba(64,64,64, .2)";
countdown.ctx.arc(0, 0, countdown.circleSize / 2, 0, 2 * Math.PI, 2);
countdown.ctx.lineWidth = countdown.border;
countdown.ctx.stroke();
// FILL
countdown.ctx.beginPath();
countdown.ctx.strokeStyle = color;
countdown.ctx.arc(0, 0, countdown.circleSize / 2, 0, endAngle, 1);
countdown.ctx.lineWidth = countdown.border;
countdown.ctx.stroke();
// TEXT COLOR
countdown.ctx.fillStyle = "rgba(32,32,32, .1)";
// COUNTDOWN TIME
countdown.ctx.font = 'bold 70px Roboto Condensed';
countdown.ctx.fillText(Math.floor(value), 0, 20);
// DAYS, HOURS, MINUTES
countdown.ctx.font = 'bold 42px Roboto Condensed';
if (Math.floor(value) === 1) {
countdown.ctx.fillText(label.substring(0, label.length - 1), 0, 140);
} else {
countdown.ctx.fillText(label, 0, 140);
}
countdown.ctx.restore();
},
completed: function() {
countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
var idx = 0;
countdown.time = "0";
for (var key in countdown.circles) {
countdown.draw(idx++, key, countdown.circles[key], "#e6e6e6");
}
// countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
// countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
// countdown.canvas.setAttribute('height', 160);
// countdown.ctx.font = 'bold 140px intel-clear-pro';
// countdown.ctx.fillText(countdown.END_DATE_MESSAGE, 0, 150);
// countdown.canvas.setAttribute('style', 'display: none;');
countdown.ctx.save();
}
};
countdown.init();
})(jQuery);
#countdown{
text-align: center;
padding: 2px 0;
font-family: 'Roboto Condensed', sans-serif;
}
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
.countdown-element {
position:absolute; top:50%; height:10em; margin-top:-5em;
text-align: center;
margin: 5px 0px 0px 0px;
color: #fff;
}
canvas {
max-width: 90%;
margin-top: 10px;
}
<h1 style="text-align: center">Time left</h1>
<div id="countdown">
<p class="countdown-element"></p>
</div>
以下是显示问题的图片。
图1(中午16点至凌晨24点不工作(
图2(上午24点至下午16点工作(
提前感谢,这对我来说意义重大。 <3 :)
您需要
在开始时检查开始时间是否在过去,如果是,则添加一天。
var start = new Date(new Date().setHours(16,0,0));
// Has the start time already passed?
if (new Date() > start)
start.setDate(start.getDate()+1);
看起来所有new Date()
的东西都有点不对劲,但它有效。我将以下示例中的时间更改为凌晨 2 点,以便于测试。
(function($){
var start = new Date(new Date().setHours(2,0,0));
// Has the start time already passed?
if (new Date() > start)
start.setDate(start.getDate()+1);
var countdown = {
END_DATE: start,
END_DATE_MESSAGE: "",
NOW: new Date(),
count: 3,
padding: 20,
circleSize: 150,
border: 20,
update: 1,
circles: {
HOURS: {
title: "HOURS",
seconds: 3600000,
max: 24,
color: '#FF3333'
},
MINUTES: {
title: "MINUTES",
seconds: 60000,
max: 60,
color: '#FF3333'
},
SECONDS: {
title: "SECONDS",
seconds: 1000,
max: 60,
color: '#FF3333'
}
},
init: function () {
countdown.canvas = document.createElement('canvas');
countdown.ctx = countdown.canvas.getContext('2d');
countdown.size = {
w: ((countdown.circleSize + countdown.border) * countdown.count + (countdown.padding * (countdown.count - 1))),
h: (countdown.circleSize + countdown.border + countdown.padding * 5)
};
countdown.canvas.setAttribute('width', countdown.size.w);
countdown.canvas.setAttribute('height', countdown.size.h);
$("#countdown").append(countdown.canvas);
countdown.ctx.textAlign = 'center';
countdown.actualSize = countdown.circleSize + countdown.border;
countdown.TIME_LEFT = new Date(countdown.END_DATE).getTime();
var INTERVAL = setInterval(function(){
var NOW = new Date();
if (NOW < countdown.END_DATE ) {
countdown.start();
} else {
//countdown.END_DATE.setDate(END_DATE.getDate() + 1);
countdown.completed();
}
}, countdown.update);
},
start: function () {
// this clears the redraw text issue after loading the intel font
countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
var idx = 0;
countdown.time = (new Date().getTime()) - countdown.TIME_LEFT;
for (var key in countdown.circles) {
countdown.draw(idx++, key, countdown.circles[key], countdown.circles[key].color);
}
},
draw: function (idx, label, circle, color) {
var x, y, value,
circleSeconds = circle.seconds;
value = parseFloat(countdown.time / circleSeconds);
countdown.time -= Math.round(parseInt(value)) * circleSeconds;
value = Math.abs(value);
x = (countdown.circleSize * .5 + countdown.border * .5);
x += (idx * (countdown.circleSize + countdown.padding + countdown.border));
y = countdown.circleSize * .5;
y += countdown.border * .5;
var degrees = 360 - (value / circle.max) * 360.0;
var endAngle = degrees * (Math.PI / 180);
countdown.ctx.save();
countdown.ctx.translate(x, y);
countdown.ctx.clearRect(countdown.actualSize * -0.5, countdown.actualSize * -0.5, countdown.actualSize, countdown.actualSize);
// OUTLINE
countdown.ctx.beginPath();
countdown.ctx.strokeStyle = "rgba(64,64,64, .2)";
countdown.ctx.arc(0, 0, countdown.circleSize / 2, 0, 2 * Math.PI, 2);
countdown.ctx.lineWidth = countdown.border;
countdown.ctx.stroke();
// FILL
countdown.ctx.beginPath();
countdown.ctx.strokeStyle = color;
countdown.ctx.arc(0, 0, countdown.circleSize / 2, 0, endAngle, 1);
countdown.ctx.lineWidth = countdown.border;
countdown.ctx.stroke();
// TEXT COLOR
countdown.ctx.fillStyle = "rgba(32,32,32, .1)";
// COUNTDOWN TIME
countdown.ctx.font = 'bold 70px Roboto Condensed';
countdown.ctx.fillText(Math.floor(value), 0, 20);
// DAYS, HOURS, MINUTES
countdown.ctx.font = 'bold 42px Roboto Condensed';
if (Math.floor(value) === 1) {
countdown.ctx.fillText(label.substring(0, label.length - 1), 0, 140);
} else {
countdown.ctx.fillText(label, 0, 140);
}
countdown.ctx.restore();
},
completed: function() {
countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
var idx = 0;
countdown.time = "0";
for (var key in countdown.circles) {
countdown.draw(idx++, key, countdown.circles[key], "#e6e6e6");
}
// countdown.ctx.setTransform(1, 0, 0, 1, 0, 0);
// countdown.ctx.clearRect(0, 0, countdown.size.w, countdown.size.h);
// countdown.canvas.setAttribute('height', 160);
// countdown.ctx.font = 'bold 140px intel-clear-pro';
// countdown.ctx.fillText(countdown.END_DATE_MESSAGE, 0, 150);
// countdown.canvas.setAttribute('style', 'display: none;');
countdown.ctx.save();
}
};
countdown.init();
})(jQuery);
#countdown{
text-align: center;
padding: 2px 0;
font-family: 'Roboto Condensed', sans-serif;
}
.vcontainer {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
.countdown-element {
position:absolute; top:50%; height:10em; margin-top:-5em;
text-align: center;
margin: 5px 0px 0px 0px;
color: #fff;
}
canvas {
max-width: 90%;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 style="text-align: center">Time left</h1>
<div id="countdown">
<p class="countdown-element"></p>
</div>