How to create visitor counter using html and javascript



Simple visitor counter with html and javascript


This will help you to count your daily and monthly visitors.
actually it is fake but it is very good to impress the visitors.

if you want to add it into your blog then follow the step.




1. Open blogger dashboard and click on layout.
2.After clicking on layout , and then click on add widget.
3.then select html and javascript widget and past the following code.









How to create visitor counter using html and javascript


Here is the code

<!DOCTYPE html>
<html>
<head>
<title></title>

<style type="text/css">
.box
{
width :90%;
margin :10px;

display :inline-block;
}
.title
{
color :#222 ;
font-weight :lighter;
padding :5px ;

}

.link
{
color :#3764a3;
font-weight :normal;
padding :5px ;
text-decoration :none;
}
.text
{
padding :5px ;
font-size :xx-large;
font-family:Courier new,monospace;
}
.new
{
padding :2px 2px 2px 2px;

font-size :smaller;
line-height :20px;
color :#fff;
background :#af1145;
border-radius :10px;
}
</style>
</head>
<body>
<div class="box">
<label class="title">Today Visitors </label>


<span class="text" id="today">636277</span>

<br>
<label class="title">This Month Visitors </label>
<span class="text"id="month">15263636262</span>
<br>
<label class="title">New</label><span class="new" id="new"></span>
<br><br>
<label class="title">You want to apply on your blogger</label><br>
<a href="#" class="link">Click here</a>
<br><br>
</div>
<script type="text/javascript">





var date = new Date();
var h = date.getHours();

var m = date.getDate();
var r1 = Math.floor(Math.random()*100);
var r2 = Math.floor(Math.random()*1000);

var td = (parseInt(h)*100)+r1;
var tm = (parseInt(m)*1000)+r2;
var nu = td-(Math.floor(Math.random()*td));
function getVisitors(){
var rr = Math.floor(Math.random()*6);
if(rr==1){
td++;
tm++;
var ru = Math.floor(Math.random()*5);
if(ru==0){
nu++;
}
document.getElementById("today").innerHTML =td;
document.getElementById("month").innerHTML = tm;
document.getElementById("new").innerHTML = nu;
}
setInterval(getVisitors, 100);

</script>

</body>
</html>




 

Comments

Popular posts from this blog

Getting Started with JavaScript

JavaScript fundamentals

How to create a list group with css