Countdown-Timer mit Bogen Leinwand

Question

Ich habe einen Countdown-Timer mit canvas erstellt. Es funktioniert gut, aber es gibt einige Probleme:

Ich brauche relative Kreis Sekunden mit Kreis Minuten und Stunden und Tage wie this demo.

Bitte führen Sie das Code-Snippet auf einer ganzen Seite aus.

Bitte schlagen Sie nicht vor, Plugins zu verwenden, weil ich gerne Kurzcode schreiben würde und auch mehr und mehr über jQuery & JavaScript wissen möchte.

(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

Sie müssen unterschiedliche ID für jede Leinwand bringen, in Stunden und Tagen Sie die gleichen, wie in Sekunden.

Danach müssen Sie die Funktion mit den verschiedenen Parametern ausführen, die notwendig sind, um jeden Canvas zu zeichnen, nicht nur für Canvas ( ) Besser, wenn Sie eine Funktion erstellen, die einen Canvas erhält und ausgeführt wird. Ich habe alles in der gleichen Funktion für die Zeit)

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

ich Tage setzen in 365-Format 2PI/365 = 0,0172, vielleicht haben Sie Sie Woche oder Monat ändern möchten.

Ich hoffe, es hilft Ihnen.

Answer 2

Bitte versuchen Sie dies,

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