How To Create Countdown Timer Redirect With jQuery

shareprogramming (44)in #utopian-io • 8 years ago (edited)

What Will I Learn?

You will learn how to make a countdown and redirect to a specific web page.
You will learn how to run javascript in HTML
You will learn to create a function in javascript
You will learn function calls

Requirements

Basic knowledge of HTML
Basic knowledge of JavaScript
You must install or host jQuery files, you can add jQuery CDN if you do not want to install it or host it. you can get JQuery its official site http://jquery.com/download/

Difficulty

Basic

Tutorial Contents

This time I will make a simple article about jQuery, that is how to make Countdown Timer Redirect. Like the Countdown title is the countdown time, and Redirect is redirected. Then later we will make the code to do the countdown, and if the result count is 0 (zero) then it will go / the direction has been determined. For more detail let's follow the steps bellow:

Open your Text editor (Notepad ++ or Macromedia Dreamweaver or Sublime text) please use select one.
Create new file save as index.html
Then type the code below:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <title>Countdown Timer Redirect</title>
</head>
<body>
 <center>Countdown Timer Redirect by @shareprogramming
    <h1><div id="countdown"></div></h1></center>
     <script>
 function counter(time, url){
    var interval = setInterval(function(){
        $('#countdown').text(time);
        time = time - 1;
 
        if(time == 0){
            clearInterval(interval);
            window.location = url;
        }
    }, 1000);
}
 $(document).ready(function(){
    counter(5, 'https://steemit.com/@shareprogramming');
});
 </script>  
</body>
</html>

To use jQuery we need to install or host it. Or we can also add jQuery CDN if we do not want to install or host it. We also have many CDN options that we can use, either Google CDN or other CDN. For more details you can visit jquery official web. In this tutorial I use Google CDN. Add CDN in <head>element.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="countdown"></div> run the javascript command we created below.
now I will explain the above code function, Functionality is one of the most beautiful parts of Javascript. A function wraps one or more commands. Every time we call a function, then the command in the function is executed. Generally its function is used for code reuse. To write the jQuery Script we should open tag. You can put it in element or in element. <script></script>
function counter(time, url)This code means we have created a function with a counter name where there are two commands, time and page
$('#countdown').text(time); #countdown is the representative name to run all the code in the count.js inside the index.php file
time = time - 1; this time can not be under one
if(time == 0){ clearInterval(interval); window.location = url; meaning if his time has reached one, it will appear web page
1000); this is delay countdown, here i give count back there is 5, if i replace 1000); to be 100); the result countdown from 5,4,3,2,1 is very fast
Before add more event in jQuery. There is an event that we should add for the first. It is ready() event. this event to make sure that all html elements are loaded. if it is, then it will load jQuery script. So, all jQuery Script must write in this function event. $(document).ready(function(){
(5, 'https://steemit.com/@shareprogramming');, 5 is the countdown time, https://steemit.com/@shareprogramming this is the destination page when the time from 5 has reached 0