 |
| how to make a javascript counter |
how to make a javascript counter? here is the code if you use this code you will get output like a counter.
538+
fllowers
536+
followers
537+
subscriber
//here is the js counter code
<html>
<head>
<title>counter example</title>
</head>
<body>
<style type="text/css">
*{margin: 0;padding: 0;}
.wraper{display: grid;grid-template-columns: repeat(3,1fr);margin: 5px 150px;
background:black;padding:10px;}
.counter,.countyoutube{color: #46ff01;font-size: 30px;}
.fowers{color: #46ff01;font-size: 20px;}
.counterfb{color: #46ff01;font-size: 30px;}
.followers,.subscribe{color: #46ff01;font-size: 20px;}
</style>
<center>
<div class="wraper">
<div>
<div class="counter">1000</div>
<br />
<div class="fowers">fllowers</div>
</div>
<div>
<div class="counterfb">2000</div>
<br />
<div class="followers">followers</div>
</div>
<div>
<div class="countyoutube">3000</div>
<br />
<div class="subscribe">subscriber</div>
</div>
</div>
</center>
<script type="text/javascript">
var count = document.querySelector(".counter");
var fllow = document.querySelector(".fowers");
var fbc = document.querySelector(".counterfb");
var fbcflo = document.querySelector(".followers");
var youtube = document.querySelector(".countyoutube");
var subscrib = document.querySelector(".subscribe");
var countit=0;
//section 1
setInterval( () => {
if (countit < 1000 ) {
countit++;
count.innerText=countit + "+";
}
},10);
setTimeout( () => {
fllow.innerText="fllowers on facebook !";
},4000 );
//section 2
setInterval( () => {
if (countit < 2000 ) {
countit++;
fbc.innerText=countit + "+";
}
},1);
setTimeout( () => {
fbcflo.innerText="fllowers on intagram !";
},4000 );
//section 3
setInterval( () => {
if (countit < 3000 ) {
countit++;
youtube.innerText=countit + "+";
}
},1);
setTimeout( () => {
subscrib.innerText="suscriber on youtube !";
},4000 );
</script>
</body>
</html>
thank you bro .....this is really amazing
ReplyDeletedefinately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog! yonatan
ReplyDelete