Skip to content

Instantly share code, notes, and snippets.

@xyclos

xyclos/VvJYRz.markdown

Last active November 25, 2015 16:55
Show Gist options
  • Save xyclos/9b59de65bbf0c36f2f3f to your computer and use it in GitHub Desktop.
Save xyclos/9b59de65bbf0c36f2f3f to your computer and use it in GitHub Desktop.
Download ZIP
VvJYRz
Raw
index.html
<!doctype html>
<html>
<head>
<style>
body {
background-color: #000;
color: #e5ffff;
}
[data-countdown] {
color: #cc0000;
}
</style>
</head>
<body>
<p>Star Wars VII: <span data-countdown="2015/12/18"></span></p>
<p>The X-Files: <span data-countdown="2016/1/24"></span></p>
<p>XCOM2: <span data-countdown="2016/2/5"></span></p>
<p>Deadpool: <span data-countdown="2016/2/12"></span></p>
<p>Battlefleet Gothic: <span data-countdown="2016/3/1"></span></p>
<p>Batman v Superman: <span data-countdown="2016/3/25"></span></p>
<p>Total War: Warhammer: <span data-countdown="2016/4/28"></span></p>
<p>Captain America: Civil War: <span data-countdown="2016/5/6"></span></p>
<p>X-Men: Apocalypse: <span data-countdown="2016/5/27"></span></p>
<p>No Man's Sky: <span data-countdown="2016/6/1"></span></p>
<p>Finding Dory: <span data-countdown="2016/6/17"></span></p>
<p>Star Trek Beyond: <span data-countdown="2016/7/22"></span></p>
<p>Suicide Squad: <span data-countdown="2016/8/5"></span></p>
<p>Dr. Strange: <span data-countdown="2016/11/4"></span></p>
<p>The Dark Tower: <span data-countdown="2017/1/13"></span></p>
<p>Guardians of the Galaxy 2: <span data-countdown="2017/5/5"></span></p>
<p>Star Wars VIII: <span data-countdown="2017/5/26"></span></p>
<p>Marvel's Spider-man: <span data-countdown="2017/7/28"></span></p>
<p>Thor: Ragnarok: <span data-countdown="2017/7/28"></span></p>
<p>Avengers: Infinity War Part 1: <span data-countdown="2018/5/4"></span></p>
<p>Frozen 2: <span data-countdown="2018/11/1"></span></p>
<p>Captain Marvel: <span data-countdown="2019/3/8"></span></p>
<p>Avengers: Infinity War Part 2: <span data-countdown="2019/5/3"></span></p>
<p>Inhumans: <span data-countdown="2019/7/12"></span></p>
<p>The Incredibles 2: <span data-countdown="2019/7/21"></span></p>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.1.0/jquery.countdown.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
$('[data-countdown]').each(function() {
var $this = $(this),
finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event) {
$this.html(event.strftime('%D days %H:%M:%S'));
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.1.0/jquery.countdown.min.js"></script>
Raw
style.css
body {
background-color: #000;
color: #e5ffff;
}
[data-countdown] {
color: #cc0000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment