JavaScript DHTML/Page Components/Counter
Содержание
A Personal Web Page Access Counter
/*
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"><!--
function nameDefined(c,n) {
var s=removeBlanks(c)
var pairs=s.split(";")
for(var i=0;i<pairs.length;++i) {
var pairSplit=pairs[i].split("=")
if(pairSplit[0]==n) return true
}
return false
}
function removeBlanks(s) {
var temp=""
for(var i=0;i<s.length;++i) {
var c=s.charAt(i)
if(c!=" ") temp += c
}
return temp
}
function getCookieValue(c,n) {
var s=removeBlanks(c)
var pairs=s.split(";")
for(var i=0;i<pairs.length;++i) {
var pairSplit=pairs[i].split("=")
if(pairSplit[0]==n) return pairSplit[1]
}
return ""
}
function insertCounter() {
readCookie()
displayCounter()
}
function displayCounter() {
document.write("<H3 ALIGN="CENTER">")
document.write("Welcome! You"ve accessed this page ")
if(counter==1) document.write("for the first time.")
else document.write(counter+" times!")
document.writeln("</H3>")
}
function readCookie() {
var cookie=document.cookie
counter=0
if(nameDefined(cookie,"pageCount"))
counter=parseInt(getCookieValue(cookie,"pageCount"))
++counter
var newCookie="pageCount="+counter
newCookie += "; expires=Wednesday, 10-Nov-10 23:12:40 GMT"
window.document.cookie=newCookie
}
// --></SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<SCRIPT LANGUAGE="JavaScript"><!--
insertCounter()
// --></SCRIPT>
<H1 ALIGN="CENTER">Keeping track of Web page access</H1>
</body>
</HTML>
Counter with images
//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.
<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.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("<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.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>
<div id="thecounter"></div>
</body>
</html>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/counter.zip">counter.zip( 10 k)</a>
Implementing a Counter
/*
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"><!--
function nameDefined(c,n) {
var s=removeBlanks(c)
var pairs=s.split(";")
for(var i=0;i<pairs.length;++i) {
var pairSplit=pairs[i].split("=")
if(pairSplit[0]==n) return true
}
return false
}
function removeBlanks(s) {
var temp=""
for(var i=0;i<s.length;++i) {
var c=s.charAt(i)
if(c!=" ") temp += c
}
return temp
}
function getCookieValue(c,n) {
var s=removeBlanks(c)
var pairs=s.split(";")
for(var i=0;i<pairs.length;++i) {
var pairSplit=pairs[i].split("=")
if(pairSplit[0]==n) return pairSplit[1]
}
return ""
}
function insertSiteCounter() {
readCookie()
displayCounter()
}
function displayCounter() {
document.write("<H3 ALIGN="CENTER">")
document.write("Welcome! You"ve accessed this site ")
if(counter==1) document.write("for the first time.")
else document.write(counter+" times!")
document.writeln("</H3>")
}
function readCookie() {
var cookie=document.cookie
counter=0
if(nameDefined(cookie,"siteCount"))
counter=parseInt(getCookieValue(cookie,"siteCount"))
++counter
var newCookie="siteCount="+counter
newCookie += ";
expires=Wednesday, 10-Nov-10 23:12:40 GMT"
newCookie += ";
path=/"
window.document.cookie=newCookie
}
// --></SCRIPT>
</HEAD>
<BODY BGCOLOR>
<SCRIPT LANGUAGE="JavaScript"><!--
insertSiteCounter()
if(counter>=10)
alert("Don"t you think its time you registered?")
// --></SCRIPT>
<H1 ALIGN="CENTER">Nagging the user to register</H1>
</body>
</HTML>
Scripting the Browser Stop Button
<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>
<H1>onStop Event Handler</H1>
<HR>
<P>Click the browser"s Stop button (in IE) to stop the script counter.</P>
<FORM>
<P><INPUT TYPE="text" NAME="display"></P>
<INPUT TYPE="button" VALUE="Start Counter" onClick="startCounter()">
<INPUT TYPE="button" VALUE="Halt Counter" onClick="haltCounter()">
</FORM>
</BODY>
</HTML>