JQuery countdown plugin
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 - 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'); } });
});
Developer | Brian |
Username | brian-baum |
Uploaded | November 22, 2022 |
Rating | 3 |
Size | 4,460 Kb |
Views | 14,168 |
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!
Name | Size |
AngularJS contact list | 4,052 Kb |
Smooth Scrolling in ReactJS | 4,005 Kb |
ReactJS Accessible Accordion Panel | 5,767 Kb |
Responsive demo page | 5,664 Kb |
JQuery hash nav plugin | 5,306 Kb |
JQuery exercise | 3,780 Kb |
ReactJS Image Carousel | 5,932 Kb |
CSS dropdowns | 3,146 Kb |
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!
Name | Username | Size |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Rows with image hover effect | Amit-webdesigner | 12,875 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Tab panels | Accessibility | 0 Kb |
Mega menu | DimaZubkov | 5,066 Kb |
RWD Conversion Practice | Jxqr97 | 2,743 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!