Live Demo - Bootstrap 4 With Countdown Jquery Demo

See Free Live Demo example of 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...

<!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="//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>

$(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); }
  });
});