Countdown via user input
Adapted from mbostock’s block #9843633 Countdown
Countdown via user input
Adapted from mbostock’s block #9843633 Countdown
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script> | |
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:500' rel='stylesheet' type='text/css'> | |
<style> | |
body { | |
font-family: 'Source Code Pro', monospace; | |
font-size: 72px; | |
text-align: center; | |
width: 960px; | |
color: #454545; | |
/*background: yellow;*/ | |
} | |
form {display: block; background: transparent; margin-top: -30px;} | |
input {border: 1px dotted #ccc; background: white; padding: 6px 10px; font-size: 18px; margin: 0 10px 20px 0; color: red; max-width: 50px;} | |
input:focus { background-color:yellow; outline: none;} | |
h1 {font-size: 18px; text-align: left; max-width: 60%; margin-left: 20%;} | |
h2 {font-size: 72px; color: #eee; margin: 0;} | |
span {color: #888;} | |
</style> | |
<h1>Enter a number between 1 and 24, which will be the hour time for tomorrow, to initiate countdown e.g. 4 would represent 4am </h1> | |
<form name="myform" onSubmit="return handleClick()"> | |
<input type="number" id="myVal" name="myValInput" maxlength="2" /> | |
<input name="Submit" type="submit" value="GO" /> | |
</form> | |
<h2>hr:mn:sc</h2> | |
<div id="countdown"></div> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
function handleClick(event){ | |
console.log(document.getElementById("myVal").value) | |
timeLeft(document.getElementById("myVal").value) | |
return false; | |
}; | |
// time via user input tomorrow | |
function timeLeft(val) { | |
var formatTime = d3.time.format("%X"), | |
countdown = d3.select("#countdown"), | |
today = d3.time.day(new Date); | |
var deadline = d3.time.day.offset(today, 1); | |
deadline.setHours(val); | |
(function tick() { | |
var now = new Date; | |
countdown.text(formatTime(new Date(+today + +deadline - d3.time.second(now)))); | |
setTimeout(tick, 1000 - now % 1000); | |
})(); | |
}; | |
</script> |