<!DOCTYPE html>
<html lang="en">
<link href= "https://cdn.jsdelivr.net/npm/Alamat emel ini dilindungi dari Spambot. Anda perlu hidupkan JavaScript untuk melihatnya./dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.container{
background-color: #016064;
}
p{
text-align: center;
}
</style>
<body onload="load()">
<p>
<div class="container">
<div class="row">
<div class="col-sm">
<p class="fs-2 text-light"><span id='0101'>12</span>+</p>
<p class="text-light">Students Associations</p>
</div>
<div class="col-sm">
<p class="fs-2 text-light"><span id='0102'>12</span>%</p>
<p class="text-light">Successful Alumni</p>
</div>
<div class="col-sm">
<p class="fs-2 text-light"><span id='0103'>12</span>+</p>
<p class="text-light align-content-center">Students Events</p>
</div>
<div class="col-sm">
<p class="fs-2 text-light"><span id='0104'>12</span>+</p>
<p class="text-light">Programmes Offered</p>
</div>
<div class="col-sm">
<p class="fs-2 text-light"><span id='0105'>12</span>%</p>
<p class="text-light">Graduates Employability</p>
</div>
<div class="col-sm">
<p class="fs-2 text-light"><span id='0106'>12</span></p>
<p class="text-light align-content-center">Total of Students Until Now</p>
</div>
</div>
</div>
</p>
<script>
function animate(obj, initVal, lastVal, duration) {
let startTime = null;
//get the current timestamp and assign it to the currentTime variable
let currentTime = Date.now();
//pass the current timestamp to the step function
const step = (currentTime ) => {
//if the start time is null, assign the current time to startTime
if (!startTime) {
startTime = currentTime ;
}
//calculate the value to be used in calculating the number to be displayed
const progress = Math.min((currentTime - startTime)/ duration, 1);
//calculate what to be displayed using the value gotten above
obj.innerHTML = Math.floor(progress * (lastVal - initVal) + initVal);
//checking to make sure the counter does not exceed the last value (lastVal)
if (progress < 1) {
window.requestAnimationFrame(step);
} else {
window.cancelAnimationFrame(window.requestAnimationFrame(step));
}
};
//start animating
window.requestAnimationFrame(step);
}
let text1 = document.getElementById('0101');
let text2 = document.getElementById('0102');
let text3 = document.getElementById('0103');
let text4 = document.getElementById('0104');
let text5 = document.getElementById('0105');
let text6 = document.getElementById('0106');
const load = () => {
animate(text1, 1, 50, 5000);
animate(text2, 1, 90, 5000);
animate(text3, 1, 100, 5000);
animate(text4, 1, 40, 5000);
animate(text5, 1, 94.8, 5000);
animate(text6, 1, 28389, 5000);
}
</script>
</body>
</html>
