ASP.NET 页面上的倒数计时器
Posted
技术标签:
【中文标题】ASP.NET 页面上的倒数计时器【英文标题】:Countdown timer on ASP.NET page 【发布时间】:2010-09-11 15:57:14 【问题描述】:您能推荐我一种在 ASP.NET 页面上放置倒数计时器的方法吗?
现在我使用这个代码:
Default.aspx
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server">60</asp:Label>
<asp:Timer ID="Timer1" runat="server" Interval="1000"
ontick="Timer1_Tick">
</asp:Timer>
</ContentTemplate>
</asp:UpdatePanel>
Default.aspx.cs
protected void Timer1_Tick(object sender, EventArgs e)
int seconds = int.Parse(Label1.Text);
if (seconds > 0)
Label1.Text = (seconds - 1).ToString();
else
Timer1.Enabled = false;
但它的流量昂贵。我更喜欢纯客户端方法。在 ASP.NET 中可能吗?
【问题讨论】:
你问这个很有趣......我几天前刚刚实施了一个类似于你的解决方案。它必须完成,这是快速而肮脏的。我很想看看如何在客户端做这个。 【参考方案1】:<script type="text/javascript">
var sec = 10;
var min = 0
var hour = 0;
var t;
function display()
sec -= 1
if ((sec == 0) && (min == 0) && (hour == 0))
//if a popup window is used:
setTimeout("self.close()", 1000);
return;
if (sec < 0)
sec = 59;
min -= 1;
if (min < 0)
min = 59;
hour -= 1;
else
document.getElementById("<%=TextBox1.ClientID%>").value = hour + ":" + min + ":" + sec;
t = setTimeout("display()", 1000);
window.onload = display;
</script>
【讨论】:
【参考方案2】:time1 = (DateTime)ViewState["time"] - DateTime.Now;
if (time1.TotalSeconds <= 0)
Label1.Text = Label2.Text = "TimeOut!";
else
if (time1.TotalMinutes > 59)
Label1.Text = Label2.Text = string.Format("0:1:D2:2:D2",
time1.Hours,
time1.Minutes,
time1.Seconds);
else
Label1.Text = Label2.Text = string.Format("0:D2:1:D2",
time1.Minutes,
time1.Seconds);
【讨论】:
【参考方案3】:使用这个javascript代码----
var sec=0 ;
var min=0;
var hour=0;
var t;
function display()
if (sec<=0)
sec+=1;
if(sec==60)
sec=0;
min+=1;
if(min==60)
hour+=1;
min=0;
if (min<=-1)
sec=0;
min+=1;
else
sec+=1 ;
document.getElementById("<%=TextBox1.ClientID%>").value=hour+":"+min+":"+sec;
t=setTimeout("display()",1000);
window.onload=display;
【讨论】:
【参考方案4】:好的,我终于结束了
<span id="timerLabel" runat="server"></span>
<script type="text/javascript">
function countdown()
seconds = document.getElementById("timerLabel").innerhtml;
if (seconds > 0)
document.getElementById("timerLabel").innerHTML = seconds - 1;
setTimeout("countdown()", 1000);
setTimeout("countdown()", 1000);
</script>
真的很简单。就像带有 JavaScript 的老式纯 HTML。
【讨论】:
回发后定时器值被重置。 我还检查了服务器以避免 Javascript 黑客攻击或重新加载表单。【参考方案5】:您可以在 .aspx 页面中添加类似的内容
<form name="counter"><input type="text" size="8"
name="d2"></form>
<script>
<!--
//
var milisec=0
var seconds=30
document.counter.d2.value='30'
function display()
if (milisec<=0)
milisec=9
seconds-=1
if (seconds<=-1)
milisec=0
seconds+=1
else
milisec-=1
document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
display()
-->
</script>
找到here
【讨论】:
以上是关于ASP.NET 页面上的倒数计时器的主要内容,如果未能解决你的问题,请参考以下文章
php 使用ShortCodes显示WooCommerce产品网格上的倒数计时器
php 为Finale更改WooCommerce单一产品页面位置为TheGem主题:WooCommerce销售倒数计时器和折扣插件