AloTimer demo

Demo for the AloTimer library

by Art

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/buzz/1.2.0/buzz.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Alorel/alo-timer/2.0.2/src/alotimer.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#new-year" data-toggle="tab">New year day</a>
  </li>
  <li>
    <a href="#bomb-xmp" data-toggle="tab">Bomb</a>
  </li>
</ul>
<div class="tab-content">
  <div id="new-year" class="tab fade in active"></div>
  <div id="bomb-xmp" class="tab fade">
    <button id="start-bomb" class="btn btn-default" type="button">Start</button>
    <span id="bomb-timer">

    </span>
    <div class="bomb" style="margin-top: 12px">
      <img src="https://cdn.rawgit.com/Alorel/alo-timer/2.0.2/demo/bomb.jpg" class="bomb" id="bomb" style="display:none" />
      <img src="https://cdn.rawgit.com/Alorel/alo-timer/2.0.2/demo/explosion.jpg" class="bomb" id="boom" style="display:none" />
    </div>
  </div>
</div>
<hr/>
<footer class="text-center">
  <small style="display:block">
    <span>Created by</span>
    <a href="https://github.com/Alorel">Alorel</a>
  </small>
  <small style="display:block">
    <span>See the source on</span>
    <a href="https://github.com/Alorel/alo-timer" target="_blank">GitHub</a>
  </small>
  <hr/>
  <div class="alert alert-warning">
    <strong>Warning!</strong>
    <span>This example, like most of the modern web, might not run on old versions of Internet Explorer.</span>
  </div>
</footer>

CSS

.bomb {
  width: 640px;
  height: 480px;
  padding: 0;
}

JavaScript

// Bomb timer
(function() {
  var sfx = new buzz.sound(
      "https://cdn.rawgit.com/Alorel/alo-timer/2.0.2/demo/bomb.wav", {
        preload: true,
        loop: false,
      }
    ),
    bomb = document.getElementById("bomb"),
    explosion = document.getElementById("boom"),
    bombTimer = document.getElementById("bomb-timer"),
    format = ["minutes", "seconds", "ms"],
    hide = function(el) {
      el.setAttribute("style", "display:none");
    },
    show = function(el) {
      el.setAttribute("style", "display:block");
    },
    interval = null;
  document.getElementById("start-bomb").addEventListener("click", function() {
    if (null !== interval) {
      clearInterval(interval);
    }
    this.innerText = "Restart";

    var t = new AloTimer(7000, format);
    hide(explosion);
    show(bomb);

    interval = setInterval(function() {
      if (t.hasFinished) {
        clearInterval(interval);
        interval = null;
        sfx.play();
        hide(bomb);
        show(explosion);
        bombTimer.innerText = "You failed to defuse the bomb. Loser!";
      } else {
        bombTimer.innerText = t.toString();
      }
    }, 10);
  });
})();

// New Year timer
(function() {
  var nextYear = (new Date()).getFullYear() + 1,
    newYearDate = new Date(nextYear, 0, 1, 0, 0, 0, 0),
    t = new AloTimer(newYearDate.getTime() - (new Date()).getTime()),
    newYearText = document.getElementById("new-year"),
    callback = function() {
      if (t.hasFinished) {
        clearInerval(newYearInterval);
        newYearText.innerText = "Happy new year!";
        newYearText.setAttribute("style", "color:red");
      } else {
        newYearText.innerText = nextYear + " will be upon us in " + t.daysLeft + " days " + t.hoursLeft + " hours " + t.minutesLeft + " minutes and " + t.secondsLeft + " seconds. Wait here.";
      }
    },
    newYearInterval = setInterval(callback, 1000);
  callback();
})();