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 页面上的倒数计时器的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 asp.net 创建 2 分钟倒数计时器

MVC 中的倒数计时器

php 使用ShortCodes显示WooCommerce产品网格上的倒数计时器

按秒倒数计时器

在按钮上显示倒数计时器

php 为Finale更改WooCommerce单一产品页面位置为TheGem主题:WooCommerce销售倒数计时器和折扣插件