Skip to content

Instantly share code, notes, and snippets.

@Joel-James

Joel-James/countdown-redirect.html

Last active September 19, 2022 05:30
Show Gist options
  • Star 49 You must be signed in to star a gist
  • Fork 24 You must be signed in to fork a gist
  • Save Joel-James/62d98e8cb3a1b6b05102 to your computer and use it in GitHub Desktop.
Save Joel-James/62d98e8cb3a1b6b05102 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
countdown-redirect.html
<!-- Modify this according to your requirement -->
<h3>
Redirecting to duckdev.com after <span id="countdown">10</span> seconds
</h3>
<!-- JavaScript part -->
<script type="text/javascript">
// Total seconds to wait
var seconds = 10;
function countdown() {
seconds = seconds - 1;
if (seconds < 0) {
// Chnage your redirection link here
window.location = "https://duckdev.com";
} else {
// Update remaining seconds
document.getElementById("countdown").innerHTML = seconds;
// Count down using javascript
window.setTimeout("countdown()", 1000);
}
}
// Run countdown function
countdown();
</script>
@trueluckdude
Copy link

trueluckdude commented Jul 10, 2021 •
edited

I just wanted to say thank you! I went ahead and made some modifications that suite my needs and thought I'd share them here. I kept my HTML intact just to show a fully working code layout for reference. The script will now get all its variables from the HTML directly so you don't have to update your code in multiple sections when implementing for another project.

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>BMRopo: Under Construction</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<link href="bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
		<link rel="preload" as="image" href="images/rocket1.gif" />
	</head>
	<body>
		<div class="col-sm-12 col-xs-7 col-lg-12 commontop text-center"> <!--Using some Bootstrap classes - remove the class or change as required.-->
			<h4>Our website is under construction and will be back soon!<br />
				<span style="color: #6495ED">
					<a id="thewebsite" href="https://www.facebook.com/bmropo/"> <!--Hyperlink used to skip past timer and set the redirect script variable, update for your site.-->
						In the meantime, we'll redirect you to our Facebook page <span id="countdown">10</span> <!--The script will use this number for the seconds vaiable.-->
					</a>
				</span>
			</h4>
			<script type="text/javascript">
			var seconds = document.getElementById("countdown").innerHTML; //Grab the countdown seconds variable from the innerHTML itself for easier adjustments
			var website = document.getElementById("thewebsite").href; //The redirect URL will be taken from the skip hyperlink with ID "thewebsite" above.
				
			function countdown() {
				if (seconds < -2) { //I'm using a negative number to delay the redirect for a smoother UX transition
					window.location = website; //Redirect to the website
				} else {
					// Update remaining seconds
					if (seconds < 1) {document.getElementById("countdown").innerHTML = "now!";} //Phrase used when countdown has reached zero - I'm a stickler for wording!
					else if (seconds < 2) {
						document.getElementById("countdown").innerHTML = "in " + seconds + " second..."; //Phrase used at the one second mark.
						document.getElementById("rocketgif").innerHTML = "<img src=\"images/rocket1.gif\" />";//Show a cool rocket at one second - make sure to preload!
					}
					else {document.getElementById("countdown").innerHTML = "in " + seconds + " seconds...";}
					seconds = seconds - 1; //Reduce the 'seconds' variable
					window.setTimeout("countdown()", 1000); //Countdown using javascript
				}
			}
			countdown(); //Run countdown function
		</script>
			<span id="rocketgif"> </span>
		</div>
	</body>
</html>

Enjoy!

-- The Dude

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment