每次数字（图像）更改时计数器javascript发出请求
我有一个计数器（从旧站点转入），它以递增的方式计数到一个大数字。我注意到它每次交换数字时都会在浏览器中发出请求。在30秒左右的时间里，可能会有几百个请求，这似乎是一种不好的做法，但也许有原因？理想情况下，每个数字只有一个请求，每个数字只有一次（0-9和，有11个图像文件），我希望图像不是图像文件，但对于某些应用程序，它们必须使用数字GIF 我不确定如何修改当前的Javascript，它看起来依赖于计数来显示数字图形 我启动了一个codepen，但得到了计数器未定义的错误，正在尝试解决方案，所以这可能是在flex中，因为我自己测试东西： 要测试的URL： 感谢您对当前代码的帮助和指导。 html:每次数字（图像）更改时计数器javascript发出请求,javascript,Javascript,我有一个计数器（从旧站点转入），它以递增的方式计数到一个大数字。我注意到它每次交换数字时都会在浏览器中发出请求。在30秒左右的时间里，可能会有几百个请求，这似乎是一种不好的做法，但也许有原因？理想情况下，每个数字只有一个请求，每个数字只有一次（0-9和，有11个图像文件），我希望图像不是图像文件，但对于某些应用程序，它们必须使用数字GIF 我不确定如何修改当前的Javascript，它看起来依赖于计数来显示数字图形 我启动了一个codepen，但得到了计数器未定义的错误，正在尝试解决方案，所以这
计数器=新计数器（）；
counter.ImgPath=“图像”
counter.SetCounterID（'BigCounterDiv'）；
柜台设置起始日期（“2015年2月18日下午12:01”）
计数器SetInitNumber（4659641290）；
计数器设定值（37）//自初始日期起每秒的速率
counter.SetCommaImage（'/comma.png'）；
计数器编号（-1）；
counter.Start（'counter'）；
function Counter()
{
this.wrappedJSObject = this;
return this;
}
function StartCounter(func)
{
}
Counter.prototype = {
ImgPath : "images",
CounterId : null,
InitNumber : 500000,
PaddingDigits : 15,
bPadDigits : false,
IntervalHandle : null,
Rate : 4,
InitDate : new Date(),
CounterVar : 'counter',
TimerFreq : 100,
CommaImg : null,
PrevNumber : -1,
Start:function (CounterVar)
{
if (this.CounterId != null)
{
//alert('this.CounterId'+this.CounterId);
document.getElementById(this.CounterId).innerHTML = 'loading';
}
else
{
document.write(this.Transform(this.Calc()+""));
}
this.InitWrite("0123456789"); //load images
setTimeout(CounterVar+".StartTimer('"+CounterVar+"')",1000);
},
StartTimer:function (CounterVar)
{
this.IntervalHandle = setInterval(CounterVar+".Write();",this.TimerFreq);
}
,
Stop:function ()
{
if (this.IntervalHandle != null)
{
clearInterval(IntervalHandle);
}
},
Write:function ()
{
var newNumber = this.Calc() + "";
if (this.CounterId != null)
{
//alert('this.CounterId'+this.CounterId);
if( this.PrevNumber == -1 || this.PrevNumber.length != newNumber.length )
{
document.getElementById(this.CounterId).innerHTML = this.Transform(newNumber);
}
else
{
this.Alter(newNumber);
}
}
else
{
document.write(this.Transform(this.Calc()+""));
}
},
InitWrite:function (str)
{
if (this.CounterId != null)
{
//alert('this.CounterId'+this.CounterId);
document.getElementById(this.CounterId).innerHTML = this.Transform(str+"");
}
else
{
document.write(this.Transform(str+""));
}
},
Calc:function ()
{
var DateNow = new Date();
DateDiff = new Date(DateNow - this.InitDate);
//DateDiff
secs = Math.floor((DateDiff.valueOf() * this.Rate) /1000);
return this.InitNumber+ (secs);
},
Transform: function (str)
{
var buffer = "</div>";
var len = str.length;
//alert("Value: " + str);
if (this.CommaImg != null)
{
var i=len-1;
var n=0;
for(i;i >= 0;i--)
{
// only update the image if the number change
buffer = "<img class='number' id='cimg"+n+"' src='"+this.ImgPath+"/"+str.charAt(i)+".png' border=0/>"+buffer;
if (i != 0 && ((len - i) % 3) == 0)
{
buffer = "<img class='number' src='"+this.ImgPath+"/"+this.CommaImg+"' border=0 />"+buffer;
}
n++;
}
}
else
{
for(i;i<len;i++)
{
if( this.PrevNumber != -1 && this.PrevNumber.charAt(i) != str.charAt(i))
{
buffer = buffer+"<img class='number' id='cimg"+i+"' src='"+this.ImgPath+"/"+str.charAt(i)+".png' border=0 />";
}
}
}
//alert("Buffer: " + buffer);
this.PrevNumber = str;
buffer = this.PadDigits(buffer);
//add padding
//if (this.PaddingDigits)
return buffer;
},
Alter: function(str)
{
var len = str.length;
var n=0;
var i=len-1;
for(i;i >= 0;i--)
{
// only update the image if the number change
if( this.PrevNumber.charAt(i) != str.charAt(i))
{
document.getElementById("cimg"+n).src=this.ImgPath+"/"+str.charAt(i)+".png";
}
n++;
}
this.PrevNumber = str;
},
PadDigits: function(str)
{
if (this.bPadDigits)
{
if (str.length < this.PaddingDigits)
{
var padLen = this.PaddingDigits - str.length;
var i;
var buffer = "";
for(i=0;i<padLen;i++)
{
buffer = buffer+"0";
}
str = buffer+str;
}
}
return str;
},
SetInitDate: function(InitDate)
{
this.InitDate = new Date(InitDate);
},
SetInitNumber:function(number)
{
this.InitNumber = number;
},
SetRate:function(Rate)
{
this.Rate = Rate;
},
SetCounterID: function(id)
{
this.CounterId = id;
},
SetPadDigits: function(b)
{
this.bPadDigits = b;
},
SetPaddingDigits: function(n)
{
this.PaddingDigits = n;
},
SetCommaImage: function (img)
{
this.CommaImg = img;
},
SetPrevNumber: function (n)
{
this.PrevNumber = n;
}
}
函数计数器（）
{
this.wrappedJSObject=this；
归还这个；
}
函数启动计数器（func）
{
}
计数器。原型={
ImgPath：“图像”，
CounterId:null，
人数：50万，
填充数字：15，
bPadDigits:错误，
IntervalHandle:null，
比率：4，
InitDate:new Date（），
counter变量：“counter”，
时间请求：100，
通信：空，
编号：-1，
启动：功能（计数器变量）
{
如果（this.CounterId！=null）
{
//警报（'this.CounterId'+this.CounterId'）；
document.getElementById（this.CounterId）.innerHTML='loading'；
}
其他的
{
document.write（this.Transform（this.Calc（）+）；
}
this.InitWrite（“0123456789”）；//加载图像
setTimeout（CounterVar+”.StartTimer（“+CounterVar+”）”，1000）；
},
StartTimer：函数（CounterVar）
{
this.IntervalHandle=setInterval（CounterVar+”.Write（）；”，this.TimerFreq）；
}
,
停止：函数（）
{
if（this.IntervalHandle！=null）
{
clearInterval（间隔句柄）；
}
},
写入：函数（）
{
var newNumber=this.Calc（）+“”；
如果（this.CounterId！=null）
{
//警报（'this.CounterId'+this.CounterId'）；
if（this.PrevNumber==-1 | | this.PrevNumber.length！=newNumber.length）
{
document.getElementById（this.CounterId）.innerHTML=this.Transform（newNumber）；
}
其他的
{
这个。改变（新号码）；
}
}
其他的
{
document.write（this.Transform（this.Calc（）+）；
}
},
InitWrite：函数（str）
{
如果（this.CounterId！=null）
{
//警报（'this.CounterId'+this.CounterId'）；
document.getElementById（this.CounterId）.innerHTML=this.Transform（str+“”）；
}
其他的
{
document.write（this.Transform（str+“”））；
}
},
计算：函数（）
{
var DateNow=新日期（）；
DateDiff=新日期（DateNow-this.InitDate）；
//DateDiff
秒=数学地板（（DateDiff.valueOf（）*此速率）/1000）；
返回此.InitNumber+（秒）；
},
转换：函数（str）
{
var buffer=“”；
var len=str.length；
//警报（“值：”+str）；
如果（this.CommaImg！=null）
{
var i=len-1；
var n=0；
对于（i；i>=0；i--）
{
//仅在数字更改时更新图像
buffer=”“+缓冲区；
如果（i！=0&（（len-i）%3）==0）
{
buffer=”“+缓冲区；
}
n++；
}
}
其他的
{
对于（i；i=0；i--）
{
//仅在数字更改时更新图像
if（this.PrevNumber.charAt（i）！=str.charAt（i））
{
document.getElementById（“cimg”+n）.src=this.ImgPath+“/”+str.charAt（i）+.png”；
}
n++；
}
这个.PrevNumber=str；
},
PadDigits：函数（str）
{
if（this.bPadDigits）
{
if（str.lengthfunction Counter()
{
this.wrappedJSObject = this;
return this;
}
function StartCounter(func)
{
}
Counter.prototype = {
ImgPath : "images",
CounterId : null,
InitNumber : 500000,
PaddingDigits : 15,
bPadDigits : false,
IntervalHandle : null,
Rate : 4,
InitDate : new Date(),
CounterVar : 'counter',
TimerFreq : 100,
CommaImg : null,
PrevNumber : -1,
Start:function (CounterVar)
{
if (this.CounterId != null)
{
//alert('this.CounterId'+this.CounterId);
document.getElementById(this.CounterId).innerHTML = 'loading';
}
else
{
document.write(this.Transform(this.Calc()+""));
}
this.InitWrite("0123456789"); //load images
setTimeout(CounterVar+".StartTimer('"+CounterVar+"')",1000);
},
StartTimer:function (CounterVar)
{
this.IntervalHandle = setInterval(CounterVar+".Write();",this.TimerFreq);
}
,
Stop:function ()
{
if (this.IntervalHandle != null)
{
clearInterval(IntervalHandle);
}
},
Write:function ()
{
var newNumber = this.Calc() + "";
if (this.CounterId != null)
{
//alert('this.CounterId'+this.CounterId);
if( this.PrevNumber == -1 || this.PrevNumber.length != newNumber.length )
{
document.getElementById(this.CounterId).innerHTML = this.Transform(newNumber);
}
else
{
this.Alter(newNumber);
}
}
else
{
document.write(this.Transform(this.Calc()+""));
}
},
InitWrite:function (str)
{
if (this.CounterId != null)
{
//alert('this.CounterId'+this.CounterId);
document.getElementById(this.CounterId).innerHTML = this.Transform(str+"");
}
else
{
document.write(this.Transform(str+""));
}
},
Calc:function ()
{
var DateNow = new Date();
DateDiff = new Date(DateNow - this.InitDate);
//DateDiff
secs = Math.floor((DateDiff.valueOf() * this.Rate) /1000);
return this.InitNumber+ (secs);
},
Transform: function (str)
{
var buffer = "</div>";
var len = str.length;
//alert("Value: " + str);
if (this.CommaImg != null)
{
var i=len-1;
var n=0;
for(i;i >= 0;i--)
{
// only update the image if the number change
buffer = "<img class='number' id='cimg"+n+"' src='"+this.ImgPath+"/"+str.charAt(i)+".png' border=0/>"+buffer;
if (i != 0 && ((len - i) % 3) == 0)
{
buffer = "<img class='number' src='"+this.ImgPath+"/"+this.CommaImg+"' border=0 />"+buffer;
}
n++;
}
}
else
{
for(i;i<len;i++)
{
if( this.PrevNumber != -1 && this.PrevNumber.charAt(i) != str.charAt(i))
{
buffer = buffer+"<img class='number' id='cimg"+i+"' src='"+this.ImgPath+"/"+str.charAt(i)+".png' border=0 />";
}
}
}
//alert("Buffer: " + buffer);
this.PrevNumber = str;
buffer = this.PadDigits(buffer);
//add padding
//if (this.PaddingDigits)
return buffer;
},
Alter: function(str)
{
var len = str.length;
var n=0;
var i=len-1;
for(i;i >= 0;i--)
{
// only update the image if the number change
if( this.PrevNumber.charAt(i) != str.charAt(i))
{
document.getElementById("cimg"+n).src=this.ImgPath+"/"+str.charAt(i)+".png";
}
n++;
}
this.PrevNumber = str;
},
PadDigits: function(str)
{
if (this.bPadDigits)
{
if (str.length < this.PaddingDigits)
{
var padLen = this.PaddingDigits - str.length;
var i;
var buffer = "";
for(i=0;i<padLen;i++)
{
buffer = buffer+"0";
}
str = buffer+str;
}
}
return str;
},
SetInitDate: function(InitDate)
{
this.InitDate = new Date(InitDate);
},
SetInitNumber:function(number)
{
this.InitNumber = number;
},
SetRate:function(Rate)
{
this.Rate = Rate;
},
SetCounterID: function(id)
{
this.CounterId = id;
},
SetPadDigits: function(b)
{
this.bPadDigits = b;
},
SetPaddingDigits: function(n)
{
this.PaddingDigits = n;
},
SetCommaImage: function (img)
{
this.CommaImg = img;
},
SetPrevNumber: function (n)
{
this.PrevNumber = n;
}
}