Foundation CSS JavaScript Timer Utility

Last Updated : 30 Dec, 2022

Foundation CSS is a responsive front-end framework for web development. It includes a variety of CSS and JavaScript utilities that can be used to build and style web applications.

One of the JavaScript utilities included in Foundation is a timer utility, which can be used to execute a function after a specified amount of time has passed.

Syntax :

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

Timer component that you can use to create a timer that can be started, paused, and restarted.

The Foundation.Timer constructor function allows you to create a new timer instance, which you can then control using the start(), pause(), and restart() methods.

Foundation CSS JavaScript Timer Utility methods:

start(): This method begins counting down the timer from the specified duration. If the timer has already been started and is currently paused, the start() method will resume the timer from the point at which it was paused.
pause(): This method pauses the timer. If the timer is already paused, the pause() method will have no effect.
restart(): This method restarts the timer from the beginning. If the timer is currently running or paused,
the restart() method will stop the timer and start it again from the beginning.

Example 1: This code display image after 3 seconds using JavaScript Timer Utility included in Foundation CSS.

This code will create an HTML page with an empty container element #image-container.
After 3 seconds, the timer will finish and the callback function will be executed, creating an HTML <img> element with the specified src attribute and adding it to the #image-container element.
The image will be displayed on the page.

HTML

<!DOCTYPE html>
<html>
<head>  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
  
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
  
   <style>
        #image-container {
          width: 30%;  
          margin: 0 auto; 
          text-align: center; 
          padding: 1rem;  
          border: 1px solid #ccc;  
          border-radius: 5px;  
        }
    </style>
</head>
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>Foundation CSS JavaScript Timer Utility </h3>
    </center>
    <div id="image-container" class="text-center"></div>
    <script>
  
        var $element = $('#image-container'); 
        var ms = 3000;
        var infinite = false; 
        var callback = function() {
            // create an image element
            var img = document.createElement('img');
            img.src = 
'https://media.geeksforgeeks.org/wp-content/uploads/20221224194623/use-CSS-modules-in-vuejs(1).jpg'; 
            $element.append(img);
        };

            var timer = 
            new Foundation.Timer($element, {duration: ms, infinite: infinite}, callback);

            timer.start();   
    </script>
</body>
</html>

Output:

Example 2: This code display the message on the page after 5 seconds using JavaScript Timer utility included in Foundation CSS.

This code will create an HTML page with an empty container element #message-container.
After 5 seconds, the timer will finish and the callback function will be executed, creating a HTML <p> element with the specified text content and adding it to the #message-container element using the append() method.
The message will then be displayed on the page.

HTML

<!DOCTYPE html>
<html>
<head>  
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
    </script>
  
   <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
</head>
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS JavaScript Timer Utility </h3>
    <div id="message-container" class="text-center"></div>
    <script>
   
        var $element = $('#message-container');
        var ms = 5000; 
        var infinite = false; 
        var callback = function() {
     
            var p = document.createElement('p');
            p.textContent = 'Hello, world!'; 
            $element.append(p);
        };

        var timer = 
        new Foundation.Timer($element, {duration: ms, infinite: infinite}, callback);
   
        var timer = 
        new Foundation.Timer($element, {duration: ms, infinite: infinite}, callback);
  
        timer.start();
    </script>
</body>
</html>

Output:

JavaScript - How To Create A Countdown Timer?

bakkeshks

Improve

Article Tags :

Foundation CSS JavaScript Timer Utility

Similar Reads

Thank You!

What kind of Experience do you want to share?