JAVASCRIPT   140

drawBackgroundCircles

Guest on 19th April 2022 01:21:21 AM

  1. function drawBackgroundCircles(){
  2.  
  3.  
  4.  
  5.           var secondBackground = document.getElementById("second-background");
  6.          // alert(secondBackground);
  7.         var minuteBackground = document.getElementById("minute-background");
  8.         //alert(minuteBackground);
  9.         var hourBackground = document.getElementById("hour-background");
  10.         //alert(hourBackground);
  11.         var dayBackground = document.getElementById("day-background");
  12.         //alert(dayBackground);
  13.         var strokeColor = '#fbfbfb';
  14.           drawCircle(secondBackground, 1, strokeColor, 16);
  15.  
  16.          drawCircle(minuteBackground, 1, strokeColor, 16);
  17.  
  18.           drawCircle(hourBackground,  1, strokeColor, 16);
  19.  
  20.           drawCircle(dayBackground, 1, strokeColor, 16);
  21. }
  22.  
  23. function drawCircle(canvas, endPercentage, strokeColor, lineWidth){
  24.         var endRadians = endPercentage * (2 * Math.PI);
  25.         var x = canvas.width / 2;
  26.         var y = canvas.height / 2;
  27.         context = canvas.getContext('2d');
  28.         context.clearRect(0, 0, canvas.width,canvas.height);
  29.         context.beginPath();
  30.         if(endPercentage == 1){
  31.                 context.arc(x, y, 65, 0, 2*Math.PI);
  32.         }
  33.         else{
  34.                 context.arc(x, y, 65, 2 * Math.PI, endRadians);
  35.         }
  36.         if(strokeColor){
  37.                 context.strokeStyle=strokeColor;
  38.         }
  39.         else{
  40.                 context.strokeStyle="#282828";
  41.         }
  42.         if(lineWidth){
  43.                 context.lineWidth=lineWidth;
  44.         }
  45.         else{
  46.                 context.lineWidth = 10;
  47.         }
  48.         context.stroke();
  49. }
  50.  
  51.  
  52. function createTimer(targetDate) {
  53.     today  = new Date();
  54.     todayEpoch  = today.getTime();
  55.  
  56.     target = new Date(targetDate);
  57.     targetEpoch = target.getTime();
  58.  
  59.     totalSeconds = (targetEpoch - todayEpoch)/1000; // get difference and convert to seconds
  60.         window.requestAnimFrame = (function(callback) {
  61.         return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
  62.         function(callback) {
  63.           window.setTimeout(callback, 1000);
  64.         };
  65.       })();
  66.           drawBackgroundCircles();
  67.     updateTimer(true);
  68.         setInterval(function(){totalSeconds -=1; updateTimer()}, 1000);
  69.  
  70. }
  71.  
  72.  
  73.  
  74. function leadingZero(time) {
  75.     return (time < 10) ? "0" + time : time;
  76. }
  77.  
  78. function updateTimer(firstUpdate) {
  79.     var seconds = totalSeconds;
  80.  
  81.     var days = Math.floor(seconds / 86400);
  82.     seconds -= days * 86400;
  83.  
  84.     var hours = Math.floor(seconds / 3600);
  85.    seconds -= hours * (3600);
  86.  
  87.     var minutes = Math.floor(seconds / 60);
  88.     seconds -= minutes * (60);
  89.  
  90.    seconds = Math.floor(seconds);
  91.         var numSecLeftDiv = document.getElementById("num-sec-left");
  92.         secondsPercentage= (seconds / 60);
  93.         var secondsCanvas = document.getElementById("second-timer");
  94.         drawCircle(secondsCanvas, secondsPercentage);
  95.         if(seconds == 1){
  96.                 numSecLeftDiv.innerHTML = seconds + "<br/><span class='time-label'>second</span>";
  97.         }
  98.         else{
  99.                 numSecLeftDiv.innerHTML = seconds + "<br/><span class='time-label'>seconds</span>";
  100.         }
  101.  
  102.         if(seconds <= 0 || firstUpdate == true){
  103.                 var numMinLeftDiv = document.getElementById("num-min-left");
  104.                 minutesPercentage= (minutes / 60);
  105.                 var minutesCanvas = document.getElementById("minute-timer");
  106.                 drawCircle(minutesCanvas, minutesPercentage);
  107.                 if(minutes==1){
  108.                         numMinLeftDiv.innerHTML = minutes + "<br/><span class='time-label'>minute</span>";
  109.                 }
  110.                 else{
  111.                         numMinLeftDiv.innerHTML = minutes + "<br/><span class='time-label'>minutes</span>";
  112.                 }
  113.         }
  114.  
  115.         if(minutes <= 0 || firstUpdate == true){
  116.                 var numHoursLeftDiv = document.getElementById("num-hours-left");
  117.                 hoursPercentage= (hours / 24);
  118.                 var hoursCanvas = document.getElementById("hour-timer");
  119.                 drawCircle(hoursCanvas, hoursPercentage);
  120.                 if(hours == 1){
  121.                         numHoursLeftDiv.innerHTML = hours + "<br/><span class='time-label'>hour</span>";
  122.                 }
  123.                 else{
  124.                         numHoursLeftDiv.innerHTML = hours + "<br/><span class='time-label'>hours</span>";
  125.                 }
  126.         }
  127.  
  128.         if(hours <= 0 || firstUpdate == true){
  129. var numDaysLeftDiv = document.getElementById("num-days-left");
  130.                 daysPercentage= (days / 365);
  131.                 var daysCanvas = document.getElementById("day-timer");
  132.                 drawCircle(daysCanvas, daysPercentage);
  133.                 if(days ==1 ){
  134.                         numDaysLeftDiv.innerHTML = days + "<br/><span class='time-label'>day</span>";
  135.                 }
  136.                 else{
  137.                 numDaysLeftDiv.innerHTML = days + "<br/><span class='time-label'>days</span>";
  138.                 }
  139.         }
  140.  
  141. }// JavaScript Document

Raw Paste


Login or Register to edit or fork this paste. It's free.