jnericks/timer.html

## timer.html
<html>
<head>
<title>Respawn Timer</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
	var timerId;

	$(function(){
		$("#TimeBox p:first").css("display", "block");

		$.fn.timer = function() {
			if(!$(this).children("p:last-child").is(":visible")){
				$(this).children("p:visible")
					.css("display", "none")
					.next("p").css("display", "block");
			} else {
				$(this).children("p:visible")
					.css("display", "none")
					.end().children("p:first")
					.css("display", "block");
			}
		} // timer function end

		$('#Reset').click(function() {
			clearInterval(timerId);
			$('#TimeBox').children("p:visible")
					.css("display", "none")
					.end().children("p:first")
					.css("display", "block")
			timerId = startTimer();
		});

		timerId = startTimer();

	});

	function startTimer() {
		return setInterval(function() {
			$("#TimeBox").timer();
		}, 1000);
	}
</script>

<style type="text/css">

	body {
		font-size: 35px;
		font-family: arial;
		margin-top: 50px;
		text-align: center;
	}

	p {
		padding: 0px;
		margin: 0px;
	}

	#Controls {
		text-align: center;
		margin-top: 10px;
	}

	#Notes {
		display: block;
		margin: auto;
		width: 600px;
		text-align: center;
	}

	#Reset {
		font-size: 100px;
		color: #3399FF;
	}

	#TimeBox{
		background: white;
		border: 2px solid #333;
		display: block;
		margin: auto;
		padding: 100px 50px 100px 50px;
		width: 450px;
	}

	#TimeBox p{
		color: #333;
		display: none;
		font-weight: bold;
		text-align: center;
	}

	#TimeBox p:first-child{
		display: block;
	}

	.Timer {
		font-size: 280px;
		color: #3399FF;
	}

</style>
</head>
<body>

<br />

<div id="TimeBox" class="Timer">
    <p>15</p>
    <p>14</p>
    <p>13</p>
    <p>12</p>
    <p>11</p>
    <p>10</p>
    <p>9</p>
	<p>8</p>
	<p>7</p>
	<p>6</p>
	<p>5</p>
	<p>4</p>
	<p>3</p>
	<p>2</p>
	<p>1</p>
</div>

<div id="Controls">
<form action="">
<input type="button" id="Reset" value = " RESET " />
</form>
</div>
<div id="Notes">
<p>If you are using a phone you may need to reset one second early.</p>
</div>
</body>
</html>
	<html>
	<head>
	<title>Respawn Timer</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript">
	var timerId;

	$(function(){
	$("#TimeBox p:first").css("display", "block");

	$.fn.timer = function() {
	if(!$(this).children("p:last-child").is(":visible")){
	$(this).children("p:visible")
	.css("display", "none")
	.next("p").css("display", "block");
	} else {
	$(this).children("p:visible")
	.css("display", "none")
	.end().children("p:first")
	.css("display", "block");
	}
	} // timer function end

	$('#Reset').click(function() {
	clearInterval(timerId);
	$('#TimeBox').children("p:visible")
	.css("display", "none")
	.end().children("p:first")
	.css("display", "block")
	timerId = startTimer();
	});

	timerId = startTimer();

	});

	function startTimer() {
	return setInterval(function() {
	$("#TimeBox").timer();
	}, 1000);
	}
	</script>

	<style type="text/css">

	body {
	font-size: 35px;
	font-family: arial;
	margin-top: 50px;
	text-align: center;
	}

	p {
	padding: 0px;
	margin: 0px;
	}

	#Controls {
	text-align: center;
	margin-top: 10px;
	}

	#Notes {
	display: block;
	margin: auto;
	width: 600px;
	text-align: center;
	}

	#Reset {
	font-size: 100px;
	color: #3399FF;
	}

	#TimeBox{
	background: white;
	border: 2px solid #333;
	display: block;
	margin: auto;
	padding: 100px 50px 100px 50px;
	width: 450px;
	}

	#TimeBox p{
	color: #333;
	display: none;
	font-weight: bold;
	text-align: center;
	}

	#TimeBox p:first-child{
	display: block;
	}

	.Timer {
	font-size: 280px;
	color: #3399FF;
	}

	</style>
	</head>
	<body>

	<br />

	<div id="TimeBox" class="Timer">
	<p>15</p>
	<p>14</p>
	<p>13</p>
	<p>12</p>
	<p>11</p>
	<p>10</p>
	<p>9</p>
	<p>8</p>
	<p>7</p>
	<p>6</p>
	<p>5</p>
	<p>4</p>
	<p>3</p>
	<p>2</p>
	<p>1</p>
	</div>

	<div id="Controls">
	<form action="">
	<input type="button" id="Reset" value = " RESET " />
	</form>
	</div>
	<div id="Notes">
	<p>If you are using a phone you may need to reset one second early.</p>
	</div>
	</body>
	</html>