帶弧形帆布的倒數計時器

Question

我用canvas創建了一個倒數計時器。 它運行良好，但是存在一些問題：

我需要像這樣的演示相對圈秒與圈分鍾，小時和天。

請在整頁中運行代碼段。

請不要建議使用插件，因為我想編寫簡短的代碼，而且我想越來越了解jQuery和JavaScript。

 (function ($) { jQuery.fn.countdown = function (options, callback) { var settings = { 'date': null }; if (options) { $.extend(settings, options); } this_sel = $(this); /*Canvas Variables*/ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; var kk = 0; /*End Canvas Variables*/ 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; context.clearRect(50, 50, canvas.width, canvas.height); kk = ((60 - seconds) * parseFloat(0.10471)); context.beginPath(); context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false); context.lineWidth = 8; context.strokeStyle = '#14E170'; context.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); } } // #region Execute Interval count_exec(); interval = setInterval(count_exec, 1000); // #endregion }; })(jQuery); $(document).ready(function () { $("#countdown").countdown({ date: "6 january 2017 7:15:00" }, function () { $("#countdown").text("merry christmas"); } ); }) 

 #countdown .countdown-container{ width:25%; position:relative; float:left; border:1px solid #0fd562; } #countdown .countdown-container >div{ position:absolute; top:100px; left:95px; text-align:center; } .secs, span{ font-size:16px; } 

 <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="myCanvas2" width="250" height="250"></canvas> </div> <div class="countdown-container"> <div class="contents"> <div class="hours"> 00 </div> <span>Hours</span> </div> <canvas id="myCanvas" width="250" height="250"></canvas> </div> <div class="countdown-container"> <div class="contents"> <div class="days"> 00 </div> <span>Days</span> </div> <canvas id="myCanvas" width="250" height="250"></canvas> </div> </div> 

Answer 1

您需要為每個畫布添加不同的ID，以小時和天為單位，以秒為單位。

此后，您需要使用繪制每個畫布所需的不同參數來執行該函數，而不僅僅是畫布（更好的是，如果您創建一個可以接收畫布並運行其畫圖的函數，那么我會在相同的函數中做所有的事情）

 (function ($) { jQuery.fn.countdown = function (options, callback) { var settings = { 'date': null }; if (options) { $.extend(settings, options); } this_sel = $(this); /*Canvas Variables*/ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; var kk = 0; var canvas2 = document.getElementById('myCanvas2'); var context2 = canvas2.getContext('2d'); var centerX2 = canvas2.width / 2; var centerY2 = canvas2.height / 2; var radius2 = 70; var kk2 = 0; var canvas3 = document.getElementById('myCanvas3'); var context3 = canvas3.getContext('2d'); var centerX3 = canvas3.width / 2; var centerY3 = canvas3.height / 2; var radius3 = 70; var kk3 = 0; var canvas4 = document.getElementById('myCanvas4'); var context4 = canvas4.getContext('2d'); var centerX4 = canvas4.width / 2; var centerY4 = canvas4.height / 2; var radius4 = 70; var kk4 = 0; /*End Canvas Variables*/ 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; context.clearRect(50, 50, canvas.width, canvas.height); kk = ((60 - seconds) * parseFloat(0.1046)); context.beginPath(); context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false); context.lineWidth = 8; context.strokeStyle = '#14E170'; context.stroke(); context2.clearRect(50, 50, canvas2.width, canvas2.height); kk2 = ((60 - minutes) * parseFloat(0.1046)); context2.beginPath(); context2.arc(centerX2, centerY2, radius2, 1.5 * Math.PI, 1.5 * Math.PI + kk2, false); context2.lineWidth = 8; context2.strokeStyle = '#14E170'; context2.stroke(); context3.clearRect(50, 50, canvas3.width, canvas3.height); kk3 = ((24 - hours) * parseFloat(0.261)); context3.beginPath(); context3.arc(centerX3, centerY3, radius3, 1.5 * Math.PI, 1.5 * Math.PI + kk3, false); context3.lineWidth = 8; context3.strokeStyle = '#14E170'; context3.stroke(); context4.clearRect(50, 50, canvas4.width, canvas4.height); kk4 = ((365 - days) * parseFloat(0.0172)); context4.beginPath(); context4.arc(centerX4, centerY4, radius4, 1.5 * Math.PI, 1.5 * Math.PI + kk4, false); context4.lineWidth = 8; context4.strokeStyle = '#14E170'; context4.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); } } // #region Execute Interval count_exec(); interval = setInterval(count_exec, 1000); // #endregion }; })(jQuery); $(document).ready(function () { $("#countdown").countdown({ date: "6 january 2017 7:15:00" }, function () { $("#countdown").text("merry christmas"); } ); }) 

 #countdown .countdown-container{ width:25%; position:relative; float:left; border:1px solid #0fd562; } #countdown .countdown-container >div{ position:absolute; top:100px; left:95px; text-align:center; } .secs, span{ font-size:16px; } 

 <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="myCanvas2" width="250" height="250"></canvas> </div> <div class="countdown-container"> <div class="contents"> <div class="hours"> 00 </div> <span>Hours</span> </div> <canvas id="myCanvas3" width="250" height="250"></canvas> </div> <div class="countdown-container"> <div class="contents"> <div class="days"> 00 </div> <span>Days</span> </div> <canvas id="myCanvas4" width="250" height="250"></canvas> </div> </div> 

我將天數設為365格式2PI / 365 = 0,0172，也許您想更改為星期或一個月。

希望對您有幫助。

Answer 2

請嘗試一下

 (function ($) { jQuery.fn.countdown = function (options, callback) { var settings = { 'date': null }; if (options) { $.extend(settings, options); } this_sel = $(this); /*Canvas Variables*/ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var centerX = canvas.width / 2; var centerY = canvas.height / 2; /*Min Canvas*/ var canvasMin = document.getElementById('canvasMin'); var contextMin = canvasMin.getContext('2d'); var centerMinX = canvasMin.width / 2; var centerMinY = canvasMin.height / 2; /*Hour Canvas*/ var canvasHour = document.getElementById('canvasHours'); var contextHour = canvasHour.getContext('2d'); var centerHourX = canvasHour.width / 2; var centerHourY = canvasHour.height / 2; /*Day Canvas*/ var canvasDays = document.getElementById('canvasDays'); var contextDays = canvasDays.getContext('2d'); var centerDaysX = canvasDays.width / 2; var centerDaysY = canvasDays.height / 2; var radius = 70; var kk = 0; var min = 0; /*End Canvas Variables*/ 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; context.clearRect(50, 50, canvas.width, canvas.height); kk = ((60 - seconds) * parseFloat(0.10471)); context.beginPath(); context.arc(centerX, centerY, radius, 1.5 * Math.PI, 1.5 * Math.PI + kk, false); context.lineWidth = 8; context.strokeStyle = '#14E170'; context.stroke(); // MInutes arc contextMin.clearRect(50, 50, canvas.width, canvas.height); min = ((60 - minutes) * parseFloat(0.10471)); contextMin.beginPath(); contextMin.arc(centerMinX, centerMinY, radius, 1.5 * Math.PI, 1.5 * Math.PI + min, false); contextMin.lineWidth = 8; contextMin.strokeStyle = '#14E170'; contextMin.stroke(); // Hours arc contextHour.clearRect(50, 50, canvas.width, canvas.height); hour = ((60 - hours) * parseFloat(0.10471)); contextHour.beginPath(); contextHour.arc(centerMinX, centerMinY, radius, 1.5 * Math.PI, 1.5 * Math.PI + hour, false); contextHour.lineWidth = 8; contextHour.strokeStyle = '#14E170'; contextHour.stroke(); // Days arc contextDays.clearRect(50, 50, canvas.width, canvas.height); day = ((60 - days) * parseFloat(0.10471)); contextDays.beginPath(); contextDays.arc(centerMinX, centerMinY, radius, 1.5 * Math.PI, 1.5 * Math.PI + day, false); contextDays.lineWidth = 8; contextDays.strokeStyle = '#14E170'; contextDays.stroke(); // add 0 value to left of value if (!isNaN(eventDate)) { //console.log(days+' : '+hours+' : '+minutes+' : '+seconds); this_sel.find('.days').text(days); this_sel.find('.hours').text(hours); this_sel.find('.mins').text(minutes); this_sel.find('.secs').text(seconds); } } // #region Execute Interval count_exec(); interval = setInterval(count_exec, 1000); // #endregion }; })(jQuery); $(document).ready(function () { $("#countdown").countdown({ date: "8 january 2017 00:00:00" }, function () { $("#countdown").text("merry christmas"); } ); }) 

 #countdown .countdown-container{ width:25%; position:relative; float:left; border:1px solid #0fd562; } #countdown .countdown-container >div{ position:absolute; top:100px; left:95px; text-align:center; } .secs, span{ font-size:16px; } 

 <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="canvasMin" width="250" height="250"></canvas> </div> <div class="countdown-container"> <div class="contents"> <div class="hours"> 00 </div> <span>Hours</span> </div> <canvas id="canvasHours" width="250" height="250"></canvas> </div> <div class="countdown-container"> <div class="contents"> <div class="days"> 00 </div> <span>Days</span> </div> <canvas id="canvasDays" width="250" height="250"></canvas> </div> </div>