ASP.NET 倒计时器（时、分、秒）

Question

我必须制作一个倒数计时器，您可以在其中选择计时器倒计时的秒数、分钟数和小时数。我找到了一个视频 (https://youtu.be/zgxV7LaoGAk?t=930)，其中这个人解释了一切是如何工作的，但他的计时器不包括小时数。

这是只有分钟和秒的倒数计时器的代码：

var currentMinutes = (newTime.Length > 2) ?
    int.Parse(newTime.Substring(0, newTime.Length - 2)) :
    0;

var currentSeconds = (newTime.Length > 2) ?
    int.Parse(newTime.Substring(newTime.Length - 2)) :
    int.Parse(newTime);

谁能告诉我如何编写带有秒、分钟和小时（var currentHours ？）的倒数计时器的代码？

var currentHours = ...


var currentMinutes = (newTime.Length > 2) ?
    int.Parse(newTime.Substring(0, newTime.Length - 2)) :
    0;

var currentSeconds = (newTime.Length > 2) ?
    int.Parse(newTime.Substring(newTime.Length - 2)) :
    int.Parse(newTime);

Answer 1

好的，那该怎么做呢？

好吧，我们可以做 100% 服务器端代码 - 如果你卡住了，那就太好了 - 不知道 JavaScript

所以，假设我们放入 3 个标签

放入 3 个文本框。

放入定时器控件。

放入 4 个按钮 -（稍后查看我们如何使用它们）。

我们有这个：

    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

    <div style="width:350px;padding:20px">

    <div style="margin:auto">

        <div style="float:left">
            <asp:Label ID="lblHours" runat="server" Text="Hours" Font-Size="Larger" ClientIDMode="Static"></asp:Label>
            <br />
            <asp:TextBox ID="txtHours" runat="server" Text="0" ClientIDMode="Static" CssClass="tbox"></asp:TextBox>
        </div>

        <div style="float:left;margin-left:20px">
            <asp:Label ID="lblMin" runat="server" Text="Minutes" Font-Size="Larger"></asp:Label>
            <br />
            <asp:TextBox ID="txtMin" runat="server" Text="0" CssClass="tbox" ClientIDMode="Static"></asp:TextBox>
        </div>

        <div style="float:left;margin-left:15px">
            <asp:Label ID="lblsec" runat="server" Text="Seconds" Font-Size="Larger"></asp:Label>
            <br />
            <asp:TextBox ID="txtSec" runat="server" BorderStyle="Solid" Text="5" CssClass="tbox" ClientIDMode="Static" ></asp:TextBox>
        </div>

        <div style="clear:both;height:15px"></div>

        <div style="margin:auto">
            <asp:Button ID="cmdStart" runat="server" Text="Start" />
            <asp:Button ID="cmdStop" runat="server" Text="Stop" style="margin-left:20px" />

            <asp:Button ID="cmdStartJS" runat="server" Text="Start JS" style="margin-left:20px"
                OnClientClick="mystart();return false" />
            <asp:Button ID="cmdStopJS" runat="server" Text="Stop JS" style="margin-left:20px"
                OnClientClick="mystop();return false"/>
            <br />
            <asp:Label ID="lblDone" runat="server" Text="" ClientIDMode="Static"></asp:Label>
        </div>

    </div>
    </div>
    <asp:Timer ID="Timer1" runat="server"></asp:Timer>

我们的代码将如下所示：

Protected Sub cmdStart_Click(sender As Object, e As EventArgs) Handles cmdStart.Click

    ' take entered values - convert to time
    Dim MyTime As DateTime
    MyTime = TimeSerial(txtHours.Text, txtMin.Text, txtSec.Text)

    ' save time value
    ViewState("MyTime") = MyTime

    Timer1.Interval = 1000  ' upddate every one second
    Timer1.Enabled = True   ' start the timer.
    lblDone.Text = "Started"
End Sub

Protected Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick

    Dim myTime As DateTime = ViewState("MyTime")

    ' check if we are to stop
    If myTime <= TimeSerial(0, 0, 0) Then
        Timer1.Enabled = False      ' turn off timer
        ' do whatever for end of timer
        lblDone.Text = "Done!"
        Exit Sub
    End If

    Dim OneSecond As TimeSpan = TimeSpan.FromSeconds(1)

    myTime = myTime - OneSecond
    ' update text boxes
    txtHours.Text = myTime.Hour
    txtMin.Text = myTime.Minute
    txtSec.Text = myTime.Second

    ViewState("MyTime") = myTime

End Sub

Protected Sub cmdStop_Click(sender As Object, e As EventArgs) Handles cmdStop.Click
    Timer1.Enabled = False
End Sub

输出：

所以上面说的桌面方法非常相似。（就像在桌面上一样，我们甚至加入了那个计时器控件）。

缺点当然是这意味着每 1 秒 post-back。

但是，我们可以用一个更新面板包围上面的标记 - 它看起来会非常光滑。

第二种方式：

100% 客户端代码。

因此，在上面的页面中，让我们为“js 按钮”编写 JavaScript 代码

我们有这个（我确实假设这个页面使用了 jQuery - 但现在已经很假设了）。

<script>

    MyTime = new Date(0,0,0,0,0,0)
    TimeZero = new Date(0,0,0,0,0,0)
    MyTimer = 0

    tH = $("#txtHours")
    tM = $("#txtMin")
    tS = $("#txtSec")

    function mystart() {

        MyTime.setHours(tH.val())
        MyTime.setMinutes(tM.val())
        MyTime.setSeconds(tS.val())

        if (MyTime > TimeZero) {
            MyTimer = setInterval(mytic,1000)
            $("#lblDone").text("Start")
        }
    }

    function mytic() {

        MyTime.setSeconds(MyTime.getSeconds() - 1)

        tH.val(MyTime.getHours())
        tM.val(MyTime.getMinutes())
        tS.val(MyTime.getSeconds())

        if (MyTime <= TimeZero) {
            clearInterval(MyTimer)
            $("#lblDone").text("Done !!!")
        }
    }

    function mystop() {
            clearInterval(MyTimer)
    }
</script>

因此 JavaScript 或服务器端代码做的事情几乎相同。

您注意到的主要区别是客户端代码？它永远不会到达服务器端，因此看起来更流畅。

ASP.NET 倒计时器（时、分、秒）

ASP.NET countdown timer (hours, minutes, seconds)

asp.net

timer

countdown

countdowntimer