<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>
Printing the table on the web page
having type effect repeatedly
</title>
<style>
* {
box-sizing: border-box;
}
h1 {
color: green;
}
#message {
display: flex;
flex-direction: row;
width: 400px;
height: 400px;
border: 2px solid royalblue;
border-radius: 10px;
color: royalblue;
font-size: x-large;
justify-content: center;
padding: 30px;
margin-left: 40px;
}
.common {
width: 400px;
height: 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: larger;
color: white;
}
#start:hover {
background-color: rgba(0, 160, 0, 1);
}
#stop:hover {
background-color: rgba(0, 160, 0, 1);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>
Printing the Table With Type Effect
</h3>
<button id="start"
class="common">
Start Printing
</button>
<div id="message"></div>
<script>
const messageContainer =
document.getElementById("message");
const startButtton =
document.getElementById("start");
const typeSpeed = 150;
let count = 1;
let index = 0;
function typeEffect(value) {
// Set of values that will be displayed in the row
let arr =
[value, " * ", count, " = ", value * count, "<br>"];
if (count >= 1 && count <= 10) {
// Appending the table inside the div element
// having id messageContainer
messageContainer.innerHTML += `${arr[index]} `;
index++;
index = index % arr.length;
if (index == 0) {
count++;
}
setTimeout(function () {
typeEffect(value);
}, typeSpeed);
}
if (count == 11) {
count = 1;
messageContainer.textContent = "";
}
}
startButtton.addEventListener("click", function (e) {
typeEffect(value = 10);
})
</script>
</body>
</html>
Stay connected with us on social media platform for instant update click here to join our Twitter, & Facebook We are now on Telegram. Click here to join our channel (@TechiUpdate) and stay updated with the latest Technology headlines. For all the latest Technology News Click Here