JQuery countdown plugin

Developer
Ludvig Lindblom
Size
4,195 Kb
Views
46,552
  1. JQuery countdown plugin Previews
  2. JQuery countdown plugin HTML Codes
  3. JQuery countdown plugin CSS Codes
  4. JQuery countdown plugin JS Codes

How do I make an jquery countdown plugin?

A jQuery plugin to handle countdowns.No fallback for non-canvas browsers at the moment, but there is a function to check for support and if not present you can simply have a text counter or something like it.. What is a jquery countdown plugin? How do you make a jquery countdown plugin? This script and codes were developed by Ludvig Lindblom on 25 July 2022, Monday.

JQuery countdown plugin Previews
IQ Test

JQuery countdown plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery countdown plugin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery countdown plugin - Script Codes CSS Codes

/* THIS CLASS IS SET TO ALL CANVAS ELEMENTS GENERATED BY THE PLUGIN AS LONG AS THE CANVAS ELEMENT IS ADDED TO A CONTAINER WITH A SET WIDTH AND HEIGHT EVERYTHING IS FINE. BORDER-RADIUS IS ONLY SET FOR THE BOX-SHADOW. DIDN'T WANT TO ADD DROP SHADOW SUPPORT IN THE PLUGIN ITSELF SINCE IT ACTS SHADY AND UNPREDICTABLE.
*/
.countdown_canvas { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 5px 5px rgba(28,82,79,.15);
}
/* CLASSES FOR DEMO PURPOSES THESE ARE THE CLASSES FOR THE CONTAINING ELEMENTS, WE NEED TO HAVE A SPECIFIED WIDTH/HEIGHT (WHICH IN OUR CASE IS 126X126 PIXELS).
*/
.one { width: 126px; height: 126px;
}
.two { width: 252px; height: 252px;
}
.three { width: 126px; height: 126px;
}
.message { max-width: 600px; font: normal 18px/1 sans-serif; color: #333; background: rgba(255,255,255,.5); padding: 10px; margin: 5px auto; border-bottom: 1px solid rgba(0,0,0,.5);
}
/* GENERAL STYLES DON'T MIND THEM
*/
html { height: 100%; margin: 0; padding: 0;
}
body { min-height: 100%; background-color: #3cb7ad; font-family: 'sans-serif'; margin: 0; padding: 0;
}
.box { margin: 0 auto; padding: 25px 0;
}

JQuery countdown plugin - Script Codes JS Codes

;(function ($, window, document, undefined) { $.fn.createCountdown = function (optionvariables) { var countdownContainer = this; var defaults = { 'canvasId': 'countdownCanvas', 'canvasClass': 'countdown_canvas', 'backgroundColor': '#b4e6e5', 'arcColor': '#e7f7f5', 'fontStyle': '700', 'fontFamily': 'Helvetica', 'startColor': '#124341', 'endColor': '#972b1f', 'padding': 20, 'lineWidth': 12, 'size': 252, 'angle': 1.5, 'countdownValue': 15, 'endValue': 5, 'markerWidth': 8, 'markerHeight': 14 }; var options = $.extend({callback: function() {}}, defaults, optionvariables); var canvas, canvasId = options.canvasId, canvasClass = options.canvasClass, intervalId = canvasId, backgroundColor = options.backgroundColor, arcColor = options.arcColor, font = options.fontStyle + ' ' + (options.size / 2) + 'px ' + options.fontFamily, startColor = options.startColor, endColor = options.endColor, padding = options.padding, lineWidth = options.lineWidth, width = options.size, height = options.size, angle = options.angle, countdownValue = options.countdownValue, endValue = options.endValue, markerWidth = options.markerWidth, markerHeight = options.markerHeight, decreaseStep = 2 / countdownValue, x = options.size / 2, y = options.size / 2, r = options.size / 2, radius = r - padding - (lineWidth / 2), startAngle = -Math.PI/2, endAngle, counterClockwise = false, runTime = countdownValue, startTime, currentTime, timeDifference; canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; canvas.setAttribute('id', canvasId); canvas.setAttribute('class', canvasClass); var context = canvas.getContext('2d'); // Draw countdown countdownContainer.drawCountdown = function(angle, color, startColor, value) { // Draw circle context.beginPath(); context.arc(x, y, r, 0, 2 * Math.PI, false); context.fillStyle = backgroundColor; context.fill(); // Draw marker if(value > 0) { context.beginPath(); context.moveTo(r, padding); context.lineTo(r, padding + (markerHeight * 2)); context.lineWidth = lineWidth - (markerWidth / 2); context.strokeStyle = color; context.stroke(); } // Draw text context.font = font; context.textBaseline = 'middle'; context.textAlign = 'center'; context.fillStyle = startColor; context.fillText(value, x, y); // Set arc variables endAngle = angle * Math.PI; // Draw arc context.beginPath(); context.arc(x, y, radius, startAngle, endAngle, counterClockwise); context.lineWidth = lineWidth; context.strokeStyle = color; context.stroke(); }; currentTime = new Date().getTime(); startTime = currentTime; // Create interval countdownContainer.intervalTrigger = function() { return window.setInterval(function() { currentTime = new Date().getTime(); timeDifference = Math.floor((currentTime - startTime) / 1000); /* // The old version of handling the integers for the countdown value and angle. countdownValue -= 1; angle -= decreaseStep; New version uses timestamps to check the time difference between each countdown tick to circumvent the issue with iOS pausing setTimeout/setInterval when a touch event is fired. */ countdownValue = runTime - timeDifference; angle = options.angle - (decreaseStep * timeDifference); if(timeDifference >= runTime) { arcColor = endColor; startColor = endColor; countdownValue = 0; angle = -0.5; } if(countdownValue <= endValue) { arcColor = endColor; startColor = endColor; } if(countdownValue < 1) { window.clearInterval(intervalId); if (typeof options.callback == 'function') { options.callback.call(this); } } context.clearRect(0, 0, width, height); countdownContainer.drawCountdown(angle, arcColor, startColor, countdownValue); }, 1000); }; return countdownContainer.each(function () { countdownContainer.html(''); countdownContainer.append(canvas); countdownContainer.drawCountdown(angle, arcColor, startColor, countdownValue); intervalId = countdownContainer.intervalTrigger(); }); };
}(jQuery, window, document));
// Used to check for canvas support
function isCanvasSupported(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d'));
}
// Call the function with different options (no options needed, except and ID and maybe a callback)
$(window).load(function() { if(isCanvasSupported) { $('.one').createCountdown({ canvasId: 'countdownOne', callback: function() { $('<div />', { class: 'message', text: 'Countdown 1 has finished!' }).appendTo($('body')); } }); $('.two').createCountdown({ canvasId: 'countdownTwo', size: 504, padding: 40, lineWidth: 24, countdownValue: 30, endValue: 10, markerWidth: 16, markerHeight: 28, fontStyle: 'bold italic', fontFamily: 'Times New Roman' }); $('.three').createCountdown({ canvasId: 'countdownThree', backgroundColor: '#000000', arcColor: '#333333', startColor: '#333333', endColor: '#fff000', countdownValue: 5, endValue: 2, callback: function() { $('<div />', { class: 'message', text: 'Countdown 3 has finished!' }).appendTo($('body')); } }); } else { $('<div />', { class: 'message', text: 'Canvas support needed!' }).appendTo($('body')); $('<div />', { class: 'message', text: 'Run an alternative, (text based perhaps?) counter instead.' }).appendTo($('body')); }
});
JQuery countdown plugin - Script Codes
JQuery countdown plugin - Script Codes
Home Page Home
Developer Ludvig Lindblom
Username ludviglindblom
Uploaded July 25, 2022
Rating 3
Size 4,195 Kb
Views 46,552
Do you need developer help for JQuery countdown plugin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ludvig Lindblom (ludviglindblom) Script Codes
Name
The Ultimate Flexbox Cheat Sheet
Just another responsive layout
Fullscreen API
Christmas ornaments
SaSS pattern
CSS mask-image
Canvas pie chart with CSS bar chart fallback
Rotating timer
Circle star
Canvas box-shadow pixel art generator
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!