JavaScript DHTML/Page Components/Counter
Содержание
A Personal Web Page Access Counter
<source lang="html4strict">
/* Mastering JavaScript, Premium Edition by James Jaworski ISBN:078212819X Publisher Sybex CopyRight 2001
- /
<HTML> <HEAD> <TITLE>Keeping track of Web page access</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY BGCOLOR="#FFFFFF"> <SCRIPT LANGUAGE="JavaScript"></SCRIPT>
Keeping track of Web page access
</body> </HTML>
</source>
Counter with images
<source lang="html4strict">
//Bogus Counter script - http://www.btinternet.ru/~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.
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.ru/~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("+"<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>"
+"
<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>"
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.ru/~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>
</body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/counter.zip">counter.zip( 10 k)</a>
Implementing a Counter
<source lang="html4strict">
/* Mastering JavaScript, Premium Edition by James Jaworski ISBN:078212819X Publisher Sybex CopyRight 2001
- /
<HTML> <HEAD> <TITLE>Nagging the user to register</TITLE> <SCRIPT LANGUAGE="JavaScript"></SCRIPT> </HEAD> <BODY BGCOLOR> <SCRIPT LANGUAGE="JavaScript"></SCRIPT>
Nagging the user to register
</body> </HTML>
</source>
Scripting the Browser Stop Button
<source lang="html4strict">
<HTML> <HEAD> <TITLE>onStop Event Handler</TITLE> <SCRIPT LANGUAGE="JavaScript"> var counter = 0 var timerID function startCounter() {
document.forms[0].display.value = ++counter timerID = setTimeout("startCounter()", 10)
} function haltCounter() {
clearTimeout(timerID) counter = 0
} document.onstop = haltCounter </SCRIPT> </HEAD> <BODY>
onStop Event Handler
Click the browser"s Stop button (in IE) to stop the script counter.
<FORM>
<INPUT TYPE="text" NAME="display">
<INPUT TYPE="button" VALUE="Start Counter" onClick="startCounter()"> <INPUT TYPE="button" VALUE="Halt Counter" onClick="haltCounter()"> </FORM> </BODY> </HTML>
</source>