<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta identify="viewport"
content material="width=gadget-width,
initial-scale=1.0" />
<title>
Printing the desk on the internet web page
having sort impact repeatedly
</title>
<type>
* {
box-sizing: border-box;
}
h1 {
colour: inexperienced;
}
#message {
show: flex;
flex-direction: row;
width: 400px;
peak: 400px;
border: 2px strong royalblue;
border-radius: 10px;
colour: royalblue;
font-size: x-large;
justify-content: middle;
padding: 30px;
margin-left: 40px;
}
.widespread {
width: 400px;
peak: 60px;
margin: 10px 10px 20px 40px;
background-color: rgba(0, 120, 0, 1);
border-radius: 15px;
border-color: rgba(0, 120, 0, 1);
font-size: bigger;
colour: white;
}
#begin:hover {
background-color: rgba(0, 160, 0, 1);
}
#cease:hover {
background-color: rgba(0, 160, 0, 1);
}
</type>
</head>
<physique>
<h1>GeeksforGeeks</h1>
<h3>
Printing the Desk With Kind Impact
</h3>
<button id="begin"
class="widespread">
Begin Printing
</button>
<div id="message"></div>
<script>
const messageContainer =
doc.getElementById("message");
const startButtton =
doc.getElementById("begin");
const typeSpeed = 150;
let depend = 1;
let index = 0;
perform typeEffect(worth) {
// Set of values that will probably be displayed within the row
let arr =
[value, " * ", count, " = ", value * count, "<br>"];
if (depend >= 1 && depend <= 10) {
// Appending the desk contained in the div component
// having id messageContainer
messageContainer.innerHTML += `${arr[index]} `;
index++;
index = index % arr.size;
if (index == 0) {
depend++;
}
setTimeout(perform () {
typeEffect(worth);
}, typeSpeed);
}
if (depend == 11) {
depend = 1;
messageContainer.textContent = "";
}
}
startButtton.addEventListener("click on", perform (e) {
typeEffect(worth = 10);
})
</script>
</physique>
</html>
