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.
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<script src=
</script>
<link rel="stylesheet" href=
<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:
Foundation CSS JavaScript Timer Utility
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.
<!DOCTYPE html> <html>
<head>
<script src=
</script>
<script src=
</script>
<link rel="stylesheet" href=
</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:
Foundation CSS JavaScript Timer Utility