Skip to content

Instantly share code, notes, and snippets.

@epatel

epatel/cd.html

Last active September 9, 2018 16:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save epatel/2eaf3e64bc4bf56ae3ab790e3e7472e0 to your computer and use it in GitHub Desktop.
Save epatel/2eaf3e64bc4bf56ae3ab790e3e7472e0 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 countdown
Raw
cd.html
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes" />
<style>
html,body {
height:100%;
}
body {
display: table;
margin: 0 auto;
}
span {
background-color: #595;
color: white;
padding: 20px;
margin: 20px;
font-size: 140pt;
font-family: Menlo;
}
.container {
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
}
.selection {
font-family: helvetica;
color: white;
height: 100%;
width: 100%;
display: table-cell;
vertical-align: middle;
}
.select_inner {
text-align: left;
}
</style>
</head>
<body bgcolor="black">
<div class="container" id="clock">
<center>
<span id="hours"></span><span id="minutes"></span><span id="seconds"></span>
</center>
</div>
<div class="selection" id="selection">
<center>
<div class="select_inner">
Date:
<select id="year">
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<select id="month">
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="day">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<br/>
Time:
<select id="hour">
<option>00</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
</select>
:
<select id="minute">
<option>00</option>
<option>05</option>
<option>10</option>
<option>15</option>
<option>20</option>
<option>25</option>
<option>30</option>
<option>35</option>
<option>40</option>
<option>45</option>
<option>50</option>
<option>55</option>
</select>
<br/>
Timezone:
<select id="tz">
<option>-12:00</option>
<option>-11:00</option>
<option>-10:00</option>
<option>-09:00</option>
<option>-08:00</option>
<option>-07:00</option>
<option>-06:00</option>
<option>-05:00</option>
<option>-04:00</option>
<option>-03:00</option>
<option>-02:00</option>
<option>-01:00</option>
<option selected=1>+00:00</option>
<option>+01:00</option>
<option>+02:00</option>
<option>+03:00</option>
<option>+04:00</option>
<option>+05:00</option>
<option>+06:00</option>
<option>+07:00</option>
<option>+08:00</option>
<option>+09:00</option>
<option>+10:00</option>
<option>+11:00</option>
<option>+12:00</option>
</select>
</div>
<br/>
<button onclick="start();">Start</button>
</center>
</div>
<script>
// example: http://rpi.memention.net/cd.html?time=2018-07-14T15:00:00%2B02:00
var url_string = window.location.href;
var url = new URL(url_string);
var time = url.searchParams.get("time");
function start() {
time= document.getElementById("year").value + "-" +
document.getElementById("month").value + "-" +
document.getElementById("day").value + "T" +
document.getElementById("hour").value + ":" +
document.getElementById("minute").value + ":00+02:00";
document.getElementById("selection").style.display = "none";
document.getElementById("selection").style.width = "0px";
document.getElementById("clock").style.display = "";
document.getElementById("clock").style.width = "100%";
update();
window.setInterval(update, 1000);
}
function update() {
var now = new Date();
var endTime = new Date(time);
var hours = ((endTime - now)/1000)/(60*60);
hours = hours > 0 ? hours : 0;
var minutes = 60*(hours - Math.floor(hours));
var seconds = 60*(minutes - Math.floor(minutes));
document.getElementById("hours").innerHTML = Math.floor(hours).toString();
document.getElementById("minutes").innerHTML = Math.floor(minutes).toString();
if (document.getElementById("minutes").innerHTML.length < 2) {
document.getElementById("minutes").innerHTML = "0" + document.getElementById("minutes").innerHTML;
}
document.getElementById("seconds").innerHTML = Math.floor(seconds);
if (document.getElementById("seconds").innerHTML.length < 2) {
document.getElementById("seconds").innerHTML = "0" + document.getElementById("seconds").innerHTML;
}
}
if (time) {
window.setInterval(update, 1000);
document.getElementById("selection").style.display = "none";
document.getElementById("selection").style.width = "0px";
} else {
document.getElementById("clock").style.display = "none";
document.getElementById("clock").style.width = "0px";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment