phirework · September 4, 2013 20:39 · bossman-codex · Dec 3, 2020
diff --git a/timestamp.html b/timestamp.html
 <html>
 <head>
 <title>Using JS to show a progress bar based on time elapsed between two points</title>
 <script type="text/javascript">

  // This is only here for illustration purposes. See comments below for how to create new start/end points
 	var randomStart = Math.random() * 24;
 	var randomEnd = Math.random() * 24;

 	function timeElapsed() {
 		var now = new Date();
 		var nowEpoch = now.getTime() / (1000 * 3600);

 		// This is only here for illustration purposes. See comments below for how to create new start/end points
 		var start = nowEpoch - randomStart;
 		var end = nowEpoch + randomEnd;

 		// This is how you would define non-random, user determined start/end points
 		// var start = new Date(2013,08,04).getTime() / (1000 * 3600);
 		// var end = new Date(2013,08,10).getTime() / (1000 * 3600);

 		var total = roundDown(end - start);
 		var elapsed = roundDown(nowEpoch - start);
 		var progress = roundDown(elapsed / total);

 		document.getElementById("current").innerHTML = showDate(now);
 		document.getElementById("total").innerHTML = total + ' hours';
 		document.getElementById("elapsed").innerHTML = elapsed + ' hours';
 		document.getElementById("progress").innerHTML = progress + ' %';
 		document.getElementById("p").value = progress * 100;
 		document.getElementById("oldp").style.width = (progress * 300) + 'px';
 	}

 	function roundDown(floating) {
 		var rounded = Math.round(floating * 100) / 100;
 		return rounded;
 	}

 	function showDate(x) {
 		year = x.getFullYear();
 		month = (x.getMonth() >= 9) ? x.getMonth() + 1: '0' + (x.getMonth() + 1);
 		day = (x.getDate() >= 9) ? x.getDate() : '0' + x.getDate();
 		hour = (x.getHours() >= 9) ? x.getHours() : '0' + x.getHours();
 		minutes = (x.getMinutes() >= 9) ? x.getMinutes() : '0' + x.getMinutes();
 		seconds = (x.getSeconds() >= 9) ? x.getSeconds() : '0' + x.getSeconds();
 		string = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
 		return string;
 	}

 	window.onload = timeElapsed;
 	window.setInterval(timeElapsed, 1000);
 </script>

 </head>

 <body>
 The current time is <span id="current"></span>.
 <br />This script will run for <span id="total"></span>.
 <br /><span id="elapsed"></span> have elapsed so far. 
 <br />The script is <span id="progress"></span> complete. 

 <br /><br />This is what you will see if you are on an HTML5 enabled browser: 
 <br /><progress id="p" max="100" value="0"></progress>

 <br /><br />This is a hand-made thing for an older browser:
 <div style="width: 300px; height: 15px; border: 1px solid black; background: #fff;"><div id="oldp" style="height: 15px; background: #000;"></div></div>

 <br />Both of those progress bars will auto-update. Leave this window and come back in a few hours and you can see it in action. 
 </body>
 </html>
	<html>
	<head>
	<title>Using JS to show a progress bar based on time elapsed between two points</title>
	<script type="text/javascript">

	// This is only here for illustration purposes. See comments below for how to create new start/end points
	var randomStart = Math.random() * 24;
	var randomEnd = Math.random() * 24;

	function timeElapsed() {
	var now = new Date();
	var nowEpoch = now.getTime() / (1000 * 3600);

	// This is only here for illustration purposes. See comments below for how to create new start/end points
	var start = nowEpoch - randomStart;
	var end = nowEpoch + randomEnd;

	// This is how you would define non-random, user determined start/end points
	// var start = new Date(2013,08,04).getTime() / (1000 * 3600);
	// var end = new Date(2013,08,10).getTime() / (1000 * 3600);

	var total = roundDown(end - start);
	var elapsed = roundDown(nowEpoch - start);
	var progress = roundDown(elapsed / total);

	document.getElementById("current").innerHTML = showDate(now);
	document.getElementById("total").innerHTML = total + ' hours';
	document.getElementById("elapsed").innerHTML = elapsed + ' hours';
	document.getElementById("progress").innerHTML = progress + ' %';
	document.getElementById("p").value = progress * 100;
	document.getElementById("oldp").style.width = (progress * 300) + 'px';
	}

	function roundDown(floating) {
	var rounded = Math.round(floating * 100) / 100;
	return rounded;
	}

	function showDate(x) {
	year = x.getFullYear();
	month = (x.getMonth() >= 9) ? x.getMonth() + 1: '0' + (x.getMonth() + 1);
	day = (x.getDate() >= 9) ? x.getDate() : '0' + x.getDate();
	hour = (x.getHours() >= 9) ? x.getHours() : '0' + x.getHours();
	minutes = (x.getMinutes() >= 9) ? x.getMinutes() : '0' + x.getMinutes();
	seconds = (x.getSeconds() >= 9) ? x.getSeconds() : '0' + x.getSeconds();
	string = year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
	return string;
	}

	window.onload = timeElapsed;
	window.setInterval(timeElapsed, 1000);
	</script>

	</head>

	<body>
	The current time is <span id="current"></span>.
	<br />This script will run for <span id="total"></span>.
	<br /><span id="elapsed"></span> have elapsed so far.
	<br />The script is <span id="progress"></span> complete.

	<br /><br />This is what you will see if you are on an HTML5 enabled browser:
	<br /><progress id="p" max="100" value="0"></progress>

	<br /><br />This is a hand-made thing for an older browser:
	<div style="width: 300px; height: 15px; border: 1px solid black; background: #fff;"><div id="oldp" style="height: 15px; background: #000;"></div></div>

	<br />Both of those progress bars will auto-update. Leave this window and come back in a few hours and you can see it in action.
	</body>
	</html>
No results found