DOM setTimeout and clearTimeout methods tutorial in JavaScript
<!DOCTYPE html>
<html lang="en">
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>setTimeout clearTimeout Methods JavaScript</title>
<link rel="stylesheet" href="css/setTimeout_clearTimeout_Methods_JavaScript.css">
</html>
<body>
<div id="test"></div><br><br>
<button onclick="stopAnimation()">Stop Animation</button><br><br>
<div id="testTwo"></div>
<script src="js/setTimeout_clearTimeout_Methods_JavaScript.js"></script>
</body>
</html>
Below File is css/setTimeout_clearTimeout_Methods_JavaScript.css File
#test {
width: 150px;
height: 150px;
background: #ff0000;
}
#testTwo {
width: 150px;
height: 150px;
background: #0000ff;
}
Below File is js/setTimeout_clearTimeout_Methods_JavaScript.js File
// setTimeout()
// The setTimeout() method calls a function after a number of milliseconds. 1 second = 1000 milliseconds.
// Syntax
// setTimeout(function, milliseconds, param1, param2, ...)
// clearTimeout()
// The clearTimeout() method clears a timer set with the setTimeout() method.
// Syntax
// clearTimeout(id_of_settimeout)
//setTimeout() function runs only once after a given time.
var id = setTimeout(Anim, 5000);
function Anim() {
console.log("Hello");
var target = document.getElementById("test");
target.style.width = "500px";
}
function stopAnimation() {
clearTimeout(id);
}
var idTwo = setTimeout(function () {
var targetTwo = document.getElementById("testTwo");
targetTwo.style.width = "500px";
}, 5000);.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment