Now we are giving you Countdown Jquery Demo with bootstrap 4. this Countdown you can use in admin panel to set Countdown clock for front. Countdown is fully responsive and support all the browser. usign this Countdown clock you can set you offer time,opeaning time,start event etc...

We allows to free snippets of bootstrap jquery countdown , you can download full code of bootstrap 4 countdown timer layout. Here in this post i will give you example of bootstrap count up timer snippet and you will get simple code of html, css and jquery. In bootstrap countdown landing page snippet i give you three tab with html, css and js, you can easily get code of bootstrap countdown timer free layout.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.countdown.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="container"> <div class="row"> <div class="offset-lg-3 col-lg-6 main-section"> <h1>Limit Time only!</h1> <div id="clock" class="coupon"></div> <select id="exampleDate"> <option>choose some date and time</option> <option value="set3daysFromNow">3 days from now</option> <option value="set2daysFromNow">2 days from now</option> <option value="set5minFromNow">5 minutes from now</option> <option value="set1minFromNow">1 minute from now</option> <option value="daysFromNow">Input days from now</option> <option value="minutesFromNow">Input minutes from now</option> <option value="other">Other value</option> </select> </div> </div> </div> </body> </html>
body{ background-color:#c2c2c2; } #clock{ font-size:35px; font-weight:600; margin-top:30px; } #exampleDate{ margin-top:30px; padding:10px; font-size: 15px; } .main-section{ padding:50px; background-color: #fff; margin-top:150px; text-align: center; }
$(function() { var currentDate = new Date(), finished = false, availiableExamples = { set3daysFromNow : 3 * 24 * 60 * 60 * 1000, set2daysFromNow : 2 * 24 * 60 * 60 * 1000, set5minFromNow : 5 * 60 * 1000, set1minFromNow : 1 * 60 * 1000 }; var d, h, m, s; function callback(event) { var timeFormat = "%d day(s) %h:%m:%s" $this = $(this); if(finished) { $this.fadeTo(0, 1); finished = false; } switch(event.type) { case "days": d = event.value; break; case "hours": h = event.value; break; case "minutes": m = event.value; break; case "seconds": s = event.value; break; case "finished": $this.fadeTo('slow', 0.5); finished = true; break; } // Assemble time format if(d > 0) { timeFormat = timeFormat.replace(/\%d/, d); timeFormat = timeFormat.replace(/\(s\)/, Number(d) == 1 ? '' : 's'); } else { timeFormat = timeFormat.replace(/\%d day\(s\)/, ''); } timeFormat = timeFormat.replace(/\%h/, h); timeFormat = timeFormat.replace(/\%m/, m); timeFormat = timeFormat.replace(/\%s/, s); // Display $this.html(timeFormat); } $('div#clock').countdown(availiableExamples.set3daysFromNow + currentDate.valueOf(), callback); $('select#exampleDate').change(function() { try { var $this = $(this), value; currentDate = new Date(); switch($this.attr('value')) { case "other": value = prompt('Set the date to countdown:\nThe hh:mm:ss parameters are opitionals', 'YYYY/MM/DD hh:mm:ss'); break; case "daysFromNow": value = prompt('How many days from now?', ''); value = new Number(value) * 24 * 60 * 60 * 1000 + currentDate.valueOf(); break; case "minutesFromNow": value = prompt('How many minutes from now?', ''); value = new Number(value) * 60 * 1000 + currentDate.valueOf(); break; default: value = availiableExamples[$this.attr('value')] + currentDate.valueOf(); } $('div#clock').countdown(value, callback); $this.find('option:first').attr('selected', true); } catch(e) { alert(e); } }); });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Related Post

Bootstrap round shape step by step wizard

Bootstrap round shape step by step wizard

Simple Step by step tab using css and Bootstrap framework

Read More
How to create custom with stylish bootstrap step tabs

How to create custom with stylish bootstrap step tabs

Bootstrap step example using custom js and css with stylish design. you can g...

Read More
Bootstrap profile page example with step tab

Bootstrap profile page example with step tab

Bootstrap profile page design example with custom step tab using html and css....

Read More

Random Post