1
Ich habe zwei Fragen die erste Frage ist, wie man diesen Countdown reagiert. Ich habe versucht, diese Responsive mit Bootstrap zu machen, aber ich konnte kein zufriedenstellendes Ergebnis erzielen.Machen Arc Canvas Responsive
Hinweis: Sie können meine Stile entfernen und von vorne anfangen, wenn Sie möchten.
Das zweite Problem aufgetreten ist, wenn, wenn ich den Radius des Kreises, von 70 auf einen anderen Wert zu ändern, dass, wenn ich den Radius meines Countdown Kreis die Kreis so sein wird sich ändern:
Der Code ist hier:
(function($) {
jQuery.fn.countdown = function(options, callback) {
var settings = {
'date': null
};
if (options) {
$.extend(settings, options);
}
this_sel = $(this);
/*Canvas JavaScript*/
var canvas = document.getElementById('myCanvas');
var canvas1 = document.getElementById('myCanvas1');
var canvas2 = document.getElementById('myCanvas2');
var canvas3 = document.getElementById('myCanvas3');
var context = canvas.getContext('2d');
var context1 = canvas1.getContext('2d');
var context2 = canvas2.getContext('2d');
var context3 = canvas3.getContext('2d');
var centerX = canvas.width/2;
var centerY = canvas.height/2;
var radius = 90;
var sec_arc_end = 0,
min_arc_end = 0,
hour_arc_end = 0,
day_arc_end = 0;
function count_exec() {
eventDate = Date.parse(settings['date'])/1000;
currentDate = Math.floor($.now()/1000);
if (eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
}
seconds = eventDate - currentDate;
days = Math.floor(seconds/(60 * 60 * 24));
seconds -= days * 60 * 60 * 24;
hours = Math.floor(seconds/(60 * 60));
seconds -= hours * 60 * 60;
minutes = Math.floor(seconds/60);
seconds -= minutes * 60;
// seconds arc canvas...................
context.clearRect(50, 50, canvas.width, canvas.height);
sec_arc_end = ((60 - seconds) * parseFloat(0.10472));
context.beginPath();
context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + sec_arc_end, false);
context.lineWidth = 8;
context.strokeStyle = '#14E170';
context.stroke();
// minutes arc canvas...................
context1.clearRect(50, 50, canvas.width, canvas.height);
min_arc_end = ((60 - minutes) * parseFloat(0.10471));
context1.beginPath();
context1.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + min_arc_end, false);
context1.lineWidth = 8;
context1.strokeStyle = '#14E170';
context1.stroke();
// hours arc canvas...................
context2.clearRect(50, 50, canvas.width, canvas.height);
hour_arc_end = ((24 - hours) * parseFloat((0.10471 * 5)/2));
context2.beginPath();
context2.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour_arc_end, false);
context2.lineWidth = 8;
context2.strokeStyle = '#14E170';
context2.stroke();
// days arc canvas...................
if (days > 364) {
$('#myCanvas3').hide();
}
context3.clearRect(50, 50, canvas.width, canvas.height);
day_arc_end = ((-days) * parseFloat((0.10471 * 5)/2)); // the problem is here
context3.beginPath();
context3.arc(centerX, centerY, radius, -0.5 * Math.PI, (((365 - days)/365) * 2 - 0.5) * Math.PI, false);
context3.lineWidth = 8;
context3.strokeStyle = '#14E170';
context3.stroke();
// add 0 value to left of value
if (!isNaN(eventDate)) {
this_sel.find('.days').text(days);
this_sel.find('.hours').text(hours);
this_sel.find('.mins').text(minutes);
this_sel.find('.secs').text(seconds);
}
}
count_exec();
console.log(days);
interval = setInterval(count_exec, 1000);
};
})(jQuery);
$(document).ready(function() {
$("#countdown").countdown({
date: "6 january 2018 6:34:00"
},
function() {
$("#countdown").text("merry christmas");
}
);
/*Make Canvas Responsive*/
$(".countdown-container").height($(".countdown-container").width());
$(window).resize(function() {
$(".countdown-container").height($(".countdown-container").width());
});
})#countdown {
width: 100%;
padding: 5px;
}
.countdown-container {
width: 24%;
height: 97%;
text-align: center;
}
#countdown .countdown-container {
text-align: center;
float: left;
position: relative;
margin: 0.30% 0.5% 0.30% 0.5%;
}
#countdown .countdown-container .contents {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
font-size-adjust: 0.58;
}
.contents div {
font-size: 28px;
}
.contents span {
font-size: 16px;
}
canvas {
width: 100%;
height: 100%;
border:1px solid #06ee7c;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="countdown">
<div class="countdown-container">
<div class="contents">
<div class="secs">
00
</div>
<span>Seconds</span>
</div>
<canvas id="myCanvas" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="mins">
00
</div>
<span>Minutes</span>
</div>
<canvas id="myCanvas1" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="hours">
00
</div>
<span>Hours</span>
</div>
<canvas id="myCanvas2" width="250" height="250"></canvas>
</div>
<div class="countdown-container">
<div class="contents">
<div class="days">
00
</div>
<span>Days</span>
</div>
<canvas id="myCanvas3" width="250" height="250"></canvas>
</div>
</div>Hinweis:
- Bitte führen Sie Code in voller Seite
- Warten Sie 1 Minute, dass der Radius Problem nach jeder Sitzung aufgetreten ist
Dieser Artikel Sie verknüpfen und durch Ihre Antwort verlängern, sind irreführend. ['closePath'] (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/closePath) als nichts zu tun Path-Deklaration. Dies ist nur ein 'lineTo (lastMovedPoint.x, lastMovedPoint.y)'. Dies zeigt absolut nicht den Kontext, dass wir eine neue Path-Deklaration starten. Nur 'beginPath' * und einige andere Hacks, die du nicht benutzen willst * tu es. – Kaiido
Jetzt, da Sie den Link entfernt haben, ist nur Ihre Antwort irreführend ;-) ** Sie haben den OP-Code nicht durch diesen 'closePath'-Aufruf ** korrigiert. Sie haben dies getan, indem Sie 'clearRect (50,50, width, height)' in 'clearRect (0,0, width, height)' geändert haben ... – Kaiido
@Kaiido Sie haben Recht, ich renne einfach und es hat nicht funktioniert.I ' Ich werde die Antwort aktualisieren. –