JQuery countdown plugin

Developer
Size
4,460 Kb
Views
14,168

How do I make an jquery countdown plugin?

A no-frills plugin that creates a countdown clock to whatever date you give it. Made to be easily re-sized for quick turnaround.. What is a jquery countdown plugin? How do you make a jquery countdown plugin? This script and codes were developed by Brian on 22 November 2022, Tuesday.

JQuery countdown plugin Previews

JQuery countdown plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery countdown plugin</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper"> <div class="counter"></div> <div class="slider"></div> <p>The functionality is pretty simple, just call the countdown plugin on an empty element and pass an object containing your target date.</p> <p> The counter was built to be easily re-sized via the main element's <span class="emphasis">font-size:</span>. Moving the above slider will increase / decrease the font size and resize the whole counter.</p> <p> Current font-size: <span class="font-size">50</span></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

JQuery countdown plugin - Script Codes CSS Codes

body { padding: 20px; font-family: arial, helvetica, sans-serif; background: gray;
}
.wrapper { min-width: 500px; max-width: 100%; width: 40%; margin: 0 auto; padding: 20px; background: white; border-radius: 5px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
}
.slider { width: 450px; margin: 140px auto 10px; clear: both;
}
p { width: 450px; margin: 0 auto 15px;
}
.font-size { font-weight: 800;
}
.emphasis { background: lightgray; padding: 0 2px; font-size: 14px;
}
.counter { font-size: 50px; /* <<< ul { display: inline-block; color: #000;
}
.counter > ul:after { content: ":"; color: #fff; margin: 0 .1em;
}
.counter > ul:last-of-type:after { content: ""; margin: 0;
}
.counter > ul li { line-height: 1em; display: inline-block; background: white; padding: .15em; border-radius: 6px;
}
.counter > ul li:first-child { margin-right: .1em;
}
.counter .labels li { width: 25%; float: left; line-height: .2em; font-size: .4em; text-align: center; color: white; background: #3A3D3A; padding-bottom: .75em;
}

JQuery countdown plugin - Script Codes JS Codes

////
// COUNTDOWN PLUGIN
////
;(function ($) { $.fn.countdown = function(options){ //global variables var vars = $.extend({}, $.fn.countdown.defaults, options), $counter = $(this), t = {day: 0, hour: 0, minute: 0, sec: 0}, targetDate = new Date(vars.targetDate).getTime(), secondsLeft; //private methods methods = { setup: function () { $.each(t, function(time, value){ var currentSection = '<ul id="'+time+'"><li>0</li><li>0</li></ul>'; $counter.append(currentSection); }); if (vars.labels) { var labelHtml = '<div class="labels"><ul><li>Days</li><li>Hours</li><li>Minutes</li><li>Seconds</li></ul></div>'; $counter.append(labelHtml); } }, updateTime: function(){ var currentTime = new Date().getTime(), secondsLeft = (targetDate - currentTime) / 1000, secsIn = {day: 86400, hour: 3600, minute: 60}; if (secondsLeft < 0) {secondsLeft = 0;} $.each(t, function(timePeriod, value){ t[timePeriod] = parseInt( (secondsLeft / secsIn[timePeriod]), 10); if (timePeriod !== 'sec'){ secondsLeft = secondsLeft % secsIn[timePeriod]; } else { t[timePeriod] = secondsLeft; } }); }, updateCounter: function() { $.each(t, function(period, value){ var section = $counter.find('#'+period).children(), digit = splitDigits(value); section.eq(0).html(digit[0]); section.eq(1).html(digit[1]); }); function splitDigits(number) { var digits = []; digits[0] = Math.floor(number / 10); digits[1] = Math.floor(number % 10); return digits; } }, tick: function () { if (secondsLeft < 1) {} else { methods.updateTime(); methods.updateCounter(); setTimeout(function() {methods.tick();}, 1000); } }, init: function () { methods.setup(); methods.updateTime(); methods.updateCounter(); methods.tick(); }, }; //initiate countdown methods.init(); }; $.fn.countdown.defaults = { targetDate: 'dec 31 2014', //string: the date you want the counter to count down to. labels: true //boolean: toggles the {day / hour / minute / second} labels };
}(jQuery));
// end of countdown plugin
// dom ready events (would usually be in separate js file)
$(document).ready(function() { // plugin call // arbitrarially make a new date var newDate = new Date(); newDate.setDate(45); $('.counter').countdown({targetDate: newDate}); // jquery for the slider $('.slider').slider({ min: 0, max: 100, value: 50, slide: function(event, ui){ var $counter = $('.counter'); $counter.css('font-size', ui.value); $('.font-size').html(ui.value); $('.slider').css('margin-top', $counter.height() + 50 + 'px'); } });
});
JQuery countdown plugin - Script Codes
JQuery countdown plugin - Script Codes
Home Page Home
Developer Brian
Username brian-baum
Uploaded November 22, 2022
Rating 3
Size 4,460 Kb
Views 14,168
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!

Brian (brian-baum) Script Codes
Create amazing Facebook ads 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!