如何在多个标签中显示客户端经过的计时器 [英] How to Show Client Side Elapsed Timer in Multiple tags
问题描述
HI，
我是Asp.net MVC的新手，目前正在MVC 3中做一个项目.而且我需要显示div加载时的经过时间.我需要客户端经过的时间以多个< div>为单位标签.
而且我在下面提到了一个经过时间的JavaScript.但我不能使用此代码在多个< div>中显示标签.
例如:我有四个< div>.标签.并且我必须在这四个< div>中显示经过的时间标签..
I am new in Asp.net MVC, and currently am doing a project in MVC 3 . And i need to show the Elapsed Time when a div is load. I need the client side Elapsed time in multiple <div> tags.
And i got a Time Elapsed javascript below mentioned. but i cant use this code to show in multiple <div> tags.
For eg : I have four <div> tags. and i have to show the Time Elapsed in these four <div> tags..
<script>
var seconds = null;
var ticker = null;
function startTimer( )
{
seconds = -1;
ticker = setInterval("tick( )", 1000);
tick( );
}
function tick( )
{
++seconds;
var secs = seconds;
var hrs = Math.floor( secs / 3600 );
secs %= 3600;
var mns = Math.floor( secs / 60 );
secs %= 60;
var pretty = ( hrs < 10 ? "0" : "" ) + hrs
+ ":" + ( mns < 10 ? "0" : "" ) + mns
+ ":" + ( secs < 10 ? "0" : "" ) + secs;
document.getElementById("ELAPSED").innerHTML = pretty;
}
</script>
<body onLoad="startTimer( )">
...
The elapsed time is now <span id="ELAPSED"></span>
...
</body>
你能帮我吗?......
谢谢和问候，
Dileep
Can you please help me.......
Thanks and Regards,
Dileep
推荐答案
我建议遵循以下步骤:
1)在要显示经过的计时器的每个页面中调用startTimer().
2)在Tick方法中，将跨度ID传递到要显示经过时间的位置.
因此，每次调用刻度线时，它将在给定的跨度ID中显示经过的时间.
该范围可以在任何页面中，也可以在任何DIV中.
以下是tick方法的代码.
I would suggest to follow below steps:
1) call startTimer( ) in each of the page where you want to show the elapsed timer.
2) In the Tick method pass the span id where you want to show the elapsed time.
So each time you call tick it will show the elapsed time in the given span id.
That span can be in any page and inside any DIV.
Below is the code for tick method.
function tick(spanId )
{
++seconds;
var secs = seconds;
var hrs = Math.floor( secs / 3600 );
secs %= 3600;
var mns = Math.floor( secs / 60 );
secs %= 60;
var pretty = ( hrs < 10 ? "0" : "" ) + hrs
+ ":" + ( mns < 10 ? "0" : "" ) + mns
+ ":" + ( secs < 10 ? "0" : "" ) + secs;
document.getElementById(spanId).innerHTML = pretty;
}
希望对您有所帮助.
Hope it helped.
我只是给您一个指示，但您无法关注我.
如果您希望它与所有独立计时器一起运行，那么您就必须使用javascript封闭功能.请查看下面的示例，其经过测试并正在运行.
看看，让我知道是否仍无法启动.
I gave you just a indication but you could not follow me.
If you want it to run with all of your independent timers then you have to play with javascript closure. Please see the below sample its tested and running.
Have a look and let me know if you still not it up and running.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Timer</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" onclick="startTimer('timer1');" value="starttimer1" />
<span id="timer1"></span>
<br />
<input type="button" onclick="startTimer('timer2');" value="starttimer2" />
<span id="timer2"></span>
</div>
</form>
</body>
<script type="text/javascript">
var startTimer = function (idtimer) {
var objtimer = document.getElementById(idtimer),
refreshTimer = showtimer(objtimer);
setInterval(refreshTimer, 1000);
}, showtimer = function (objElment) {
var element = objElment, seconds = -1;
return function () {
++seconds;
var secs = seconds;
var hrs = Math.floor(secs / 3600);
secs %= 3600;
var mns = Math.floor(secs / 60);
secs %= 60;
var pretty = (hrs < 10 ? "0" : "") + hrs + ":" + (mns < 10 ? "0" : "") + mns + ":" + (secs < 10 ? "0" : "") + secs;
if (element) {
element.innerHTML = pretty;
}
};
};
</script>
</html>
您还可以在小提琴
You can also view the running sample at Fiddle
这篇关于如何在多个标签中显示客户端经过的计时器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
