Counter with images
//Bogus Counter script - http://www.btinternet.com/~kurt.grigg/javascript
/*
1: Make sure the counter images are in a folder/directory called exactly
"counterdigits". Make sure this folder is in the same folder as the web page
using the script.
2: Put this js link between the head tags of your page html.
Make sure the counter.js file is in the web page folder, NOT the images folder.
<script type="text/javascript" src="counter.js"></script>
3: Copy and paste this div html to where ever you want the counter to appear in the
page. Other divs and tables etc OK.
<div id="thecounter"></div>
4: To alter the counter length and start value, right click on the counter.js file
and choose edit.
*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bogus Counter</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">
<style type="text/css">
body{
background-color : #000000;
}
</style>
<script type="text/javascript">
//Bogus Counter script - http://www.btinternet.com/~kurt.grigg/javascript
if ((document.getElementById && document.createElement("img")) &&
window.addEventListener || window.attachEvent){
(function(){
//Customize the counter here.
//How many digits do you want in your counter?
var counter_length = 7;
//Choose a start value. If your "counter_length" is 7, "counter_start_from" MUST be 7 numbers long!
var counter_start_from = "9999980";
//Gives a random hit anywhere from 0 to "random_timer" seconds.
var random_timer = 2;
//Nothing needs altering past here!
var pics = [];
var load = [];
for(i = 0; i < 10; i++){
pics[i]=i+".gif";
}
for(i = 0; i < pics.length; i++){
load[i] = new Image();
load[i].src = "counterdigits/"+pics[i];
}
var temp_stop = [];
var stop;
var c = "";
for(i = 0; i < counter_length; i++){
temp_stop[i] = 9;
stop = c+=temp_stop[i];
}
var counter_end_at = parseInt(stop);
if (counter_start_from.length != counter_length){
alert("You want the counter to be "+counter_length+" digits long.\nThe variable \"counter_start_from\" must be "+counter_length+" digits long too!\nYou have it set to "+counter_start_from.length+".");
return false;
}
//Stop Opera selecting anything whilst dragging! Not ideal, keep eye on this for future version probs.
if (window.opera){
document.write("<input type='hidden' id='Q' value=' '>");
}
var y,x,z,temp1,temp2,dom,temp3,temp4;
var n = 500;
var dragOK = false;
var timer = 1000;
random_timer *= 1000;
var disp = [];
document.write('<div id="infobox" style="position:absolute;top:125px;left:100px;height:160px;width:251px;padding-top:23px;border:2px outset window;background-color:#ece9d8;text-align:center;visibility:hidden">'
+'<textarea style="height:90px;width:200px;font-family:verdana,arial,sans-serif;font-size:11px;border:2px inset window">'
+'Home version 0.13 Acme Live Counter cannot cope with the popularity of this web page.'
+'\n\n'
+'Upgrade to Pro version 0.02 recommended. Site owner has been informed.</textarea>'
+'<br/><input id="trick" type="button" value="Visit Acme web site" style="width:140px;font-family:verdana,arial,sans-serif;font-size:11px;margin-top:20px;"> <input id="cont" type="button" value="Close" style="font-family:verdana,arial,sans-serif;font-size:11px;margin-top:20px;">'
+'<\/div>'
+'<div id="infobar" style="position:absolute;top:100px;left:100px;height:25px;width:251px;border:2px outset window;font-family:verdana,arial,sans-serif;font-size:11px;font-weight:bold;color:#000000;line-height:25px;text-align:center;background-color:#ece9d8;visibility:hidden;cursor:move">Acme notice \- counter overload<\/div>');
function do_counter(){
var v1,v2,v3;
timer = Math.round(Math.random()*random_timer);
counter_start_from++;
if (counter_start_from > counter_end_at){
clearTimeout(timer);
vis(true,false);
return false;
}
v1 = counter_start_from.toString();
v2 = v1.split("");
v3 = counter_length-v2.length;
for(i = 0; i < v2.length; i++){
disp[i+v3].setAttribute("src", load[v2[i]].src);
}
setTimeout(do_counter,timer);
}
function check(e){
if (!e) e = window.event;
dom = (typeof e.pageY == "number");
if (dom){
dragOK = (e.target.id == "infobar");
}
else{
dragOK = (e.srcElement.id == "infobar");
}
if (dragOK){
if (window.opera){
document.getElementById("Q").focus();
}
z = (dom)? e.target.style:e.srcElement.style;
z.zIndex = n++;
down(e);
}
}
function down(e){
if (dom){
y = e.pageY - parseInt(z.top);
x = e.pageX - parseInt(z.left);
}
else{
temp1 = z.pixelLeft;
temp2 = z.pixelTop;
y = e.clientY;
x = e.clientX;
}
document.onmousemove = move;
if (dom) return false;
}
function move(e){
if (!e) e = window.event;
if (dom){
z.top = parseInt(e.pageY)-y +'px';
z.left = parseInt(e.pageX)-x +'px';
}
else{
z.left = temp1 + e.clientX-x;
z.top = temp2 + e.clientY-y;
}
temp4.top = 25 + parseInt(temp3.top) +'px';
temp4.left = parseInt(temp3.left) +'px';
return false;
}
function up(){
document.onmousemove = null;
z = null;
dragOK = false;
}
function ext(){
vis(false,true);
}
function vis(a,b){
var c = (!a)?'hidden':'visible';
temp3.visibility = c;
temp4.visibility = c;
if (b){
temp3.top = 0 +'px';
temp3.left = 0 +'px';
temp4.top = 0 +'px';
temp4.left = 0 +'px';
}
}
function exp(){
if (confirm("Apparently, there is no such site and no such thing as a\"live\" hit counter either.\n\nGet this bogus hit counter and lots of other web page tomfoolery from Kurt's DHTML."))
window.location.href = "http://www.btinternet.com/~kurt.grigg/javascript";
}
function init(){
if (document.getElementById("thecounter")){
for(i = 0; i < counter_length; i++){
disp[i] = document.createElement("img");
disp[i].setAttribute("src", load[0].src);
disp[i].setAttribute("id", "dgts'+i+'");
disp[i].setAttribute("width", "26");
disp[i].setAttribute("height", "24");
document.getElementById("thecounter").appendChild(disp[i]);
}
temp3 = document.getElementById("infobar").style;
temp4 = document.getElementById("infobox").style;
do_counter();
}
}
if (window.addEventListener){
document.addEventListener("mousedown",check,false);
document.addEventListener("mouseup",up,false);
document.getElementById("trick").addEventListener("click",exp,false);
document.getElementById("cont").addEventListener("click",ext,false);
window.addEventListener("load",init,false);
}
else if (window.attachEvent){
window.attachEvent("onload",init);
document.getElementById("trick").attachEvent("onclick",exp);
document.getElementById("cont").attachEvent("onclick",ext);
document.attachEvent("onmousedown",check);
document.attachEvent("onmouseup",up);
}
})();
}//End.
</script>
</head>
<body>
<div id="thecounter"></div>
</body>
</html>
counter.zip( 10 k)Related examples in the same category