Javascript Clock（Timer）从隐藏字段中存储的提供时间范围开始。 [英] Javascript Clock(Timer) to start from the provided time span stored in hidden field.
本文介绍了Javascript Clock（Timer）从隐藏字段中存储的提供时间范围开始。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
<html>
<head>
<title>Digital clock</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link href="../Styles/jquery.alerts.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/jquery.alerts.js" type="text/javascript"></script>
</head>
<body onunload="return returnTime()" >
<script language="JavaScript" type="text/javascript">
function returnTime() {
var closeTime = new Date();
window.returnValue = closeTime;
}
function CloseWindow() {
window.close();
}
</script>
<body onload="timer()" >
<style type="text/css">
#time{
font-size:50pt;
}
#body
{
background-color:#F3F3F3;
}
</style>
<script type="text/javascript">
var digiclock = "00:00:00";
i = 0;
function timer() {
var digiformat = "";
if (i > 3599) {
var H = Math.floor(i / 3600);
}
else {
var H = 0;
}
var M = i - (H * 3600)
if (M > 59) {
M = Math.floor(M / 60)
}
else {
M = 0
}
var S = i - (M * 60)
if (H < 10) {
H = "0" + H;
}
if (M < 10) {
M = "0" + M;
}
if (S < 10) {
S = "0" + S;
}
document.getElementById('time').innerHTML = H + ":" + M + ":" + S;
setTimeout('timer()', 1000);
i++;
}
</script>
<table style="background-color:#F3F3F3;">
<tr>
<td><div><center><p style="font-family:Calibri;font-size:1.8em;color:#104E8B;">Total Elapsed Time</p> </center></div>
</td>
</tr>
<tr>
<td><div id="time"><center>90</center></div>
</td>
</tr>
<tr>
<td>
<center>
<form runat="server">
<asp:Button ID="btnStop" runat="server" Text="Stop"
style="width:150px;height:30px;font-weight:bold;background-color:#104E8B;color:White;border:1px solid"
onclick="btnStop_Click" /></form></center>
<input id="HiddenTaskname" type="hidden" value="" runat="server" />
</td>
</tr>
</table>
</body>
</html>
上面你可以看到当上面的页面打开时，计时器（时钟）从00:00:00开始。我想以这样的方式更新它，它将从所提到的指定时间开始。例如，如果我们将参数传递给此页面为14:30:58，那么计时器将从14:30:58开始，依此类推。我将从查询字符串中传递此参数。请帮助我更新上面的代码，以便它满足我的要求。
Above you can see that when the above page opens a timer(Clock) is starting from 00:00:00 . I want to update it in such a way that it will start from the specified time as mentioned . For example if we pass an argument to this page as 14:30:58 then the timer will start from 14:30:58 and so on. I ll pass this argument from the query string .Please help me to update above code so that it fulfills my requirement.
推荐答案
更改了代码，我使用下面的代码来满足我的要求。
希望这对那些有类似要求的人有所帮助： -
Changed the Code and I used below code to fulfill my requirements.
Hope this will help to those who have similar requirements:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body onload="runClock()">
<body style="background-color:#F3F3F3;">
<form id="clock" runat="server">
<asp:scriptmanager id="ScriptManger1" runat="server" xmlns:asp="#unknown" />
<asp:updatepanel runat="server" id="updClock" xmlns:asp="#unknown">
<contenttemplate>
<div>
<table>
<tr>
<td><h2>
<asp:label id="lblTaskName" runat="server" text="Label"></asp:label> Elapsed Time</h2></td>
</tr>
<tr>
<td>
<asp:textbox id="inHour" text="00" style="color:Blue;width:30px;font-size:1.2em;background-color:#F3F3F3;border:0px;" runat="server" /> Hours,
<asp:textbox id="inMinute" text="00" style="color:Blue;width:30px;font-size:1.2em;background-color:#F3F3F3;border:0px;" runat="server" /> Minutes,
<asp:textbox id="inSecond" text="00" style="color:Blue;width:30px;font-size:1.2em;background-color:#F3F3F3;border:0px;" runat="server" /> Seconds <br><br>
</br></br></td></tr>
<tr>
<td>
<asp:button id="btnStop" runat="server" text="Stop" style="width:150px;height:30px;font-weight:bold;background-color:#104E8B;color:White;border:1px solid">
onclick="btnStop_Click" /></asp:button></td>
</tr>
</table>
</div>
</contenttemplate>
</asp:updatepanel>
<div class="divTextAlign">
<asp:updateprogress id="updProgress" runat="server" dynamiclayout="true" associatedupdatepanelid="updClock" xmlns:asp="#unknown">
<progresstemplate>
<table border="1px">
<tr>
<td> <img src="../images/faismall_logo.jpg" alt="" />
</td></tr>
<tr>
<td>
<img src="../images/ajax-loader.gif" alt="" />
</td>
</tr>
</table>
</progresstemplate>
</asp:updateprogress>
</div>
</form>
<![CDATA[<%--<input type = "button" name = "but1"id = "but1" value = "Start Clock" onclick = "runClock()">--%>]]>
</body>
<script type = "text/javascript">
var startTime;
var tim;
function runClock() {
var hh = document.getElementById("<%= inHour.ClientID%>").value;
if (isNaN(hh) || hh < 0 || hh > 23) {
alert("Invalid Value for HOURS")
return false;
}
var mm = document.getElementById("<%= inMinute.ClientID%>").value;
if (isNaN(mm) || mm < 0 || mm > 59) {
alert("Invalid Value for MINUTES")
return false;
}
var ss = document.getElementById("<%= inSecond.ClientID%>").value;
if (isNaN(ss) || ss < 0 || ss > 59) {
alert("Invalid Value for SECONDS")
return false;
}
var start = new Date(2009, 1, 1, hh, mm, ss);
startTime = start.getTime();
incClock()
}
function incClock() {
startTime = startTime + 1000;
var x = new Date(startTime);
var hours = x.getHours();
var minutes = x.getMinutes()
var secs = x.getSeconds();
document.getElementById("<%= inHour.ClientID%>").value = hours;
document.getElementById("<%= inMinute.ClientID%>").value = minutes;
document.getElementById("<%= inSecond.ClientID%>").value = secs;
tim = setTimeout('incClock()', 1000);
}
function stopClock() {
window.clearTimeout(tim);
}
</script>
</html></html>
Pass the InHours.Text,inMinutes.Text and InSecond.Text at the page load , Update this page as per your requirement.You can also stop and reset the clock and the javascript function for that are also incorporated .
Pass the InHours.Text,inMinutes.Text and InSecond.Text at the page load , Update this page as per your requirement.You can also stop and reset the clock and the javascript function for that are also incorporated .
if you want to send initial value to 1:00:00
send it in three parameter.
like
if you want to send initial value to 1:00:00
send it in three parameter.
like
<body onload="timer('1','0','0')"></body>
Add this part in timer function
Add this part in timer function
<script type="text/javascript">
i = 0;
function timer( hh,mm,ss ) {
if (i == 0) {
i = parseInt(hh * 3600) + parseInt(mm * 60) + parseInt(ss)
alert(i);
}
这篇关于Javascript Clock（Timer）从隐藏字段中存储的提供时间范围开始。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
