Asp.Net 中的秒表定时器

Question

我想使用 Asp.Net C# 显示秒表计时器...

我已经浏览了很多线程并也在 Google 上进行了搜索，但我找不到合适的代码或解决方案。

我发现的大多数解决方案都很难实施，其中一些根本不起作用。

我想创建如下图所示的秒表。

通过单击开始按钮，手表会以 HH.MM 的格式从 00.00 开始计时，并更改停止按钮的文本。

通过再次单击该按钮，它会停止手表，然后将该时间保存在数据库中，并将其显示在给定的文本框中。

单击“重置”会将时间重置为 00:00。

我该怎么做？

我对此没有任何想法，所以需要一些代码。

下面是我在网站中尝试过的代码和图像...

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Diagnostics;

public partial class Default5 : System.Web.UI.Page
{
    private Stopwatch sw = new Stopwatch();
        protected void Page_Load(object sender, EventArgs e)
        {


        }

        protected void Button3_Click(object sender, EventArgs e)
        {
            if (Button3.Text == "start")
            {
                Timer1.Enabled = true;
                sw.Start();
                Button3.Text = "stop";

            }
            else
            {
                Timer1.Enabled = false;
                sw.Stop();
                Button3.Text = "start";

                //TextBox1.Text = Label1.Text;
            }
        }

        protected void Timer1_Tick(object sender, EventArgs e)
        {
            int hrs = sw.Elapsed.Hours;
            //int hrs = "1;
            int mins = sw.Elapsed.Minutes;
            int secs = sw.Elapsed.Seconds;

            Label1.Text = hrs + ":";

            if (mins < 10)
               Label1.Text += "0" + mins + ":";
            else
                Label1.Text += mins + ":";

            if (secs < 10)
                Label1.Text += "0" + secs;
            else
                Label1.Text += secs;
        }
}

项目中编写的代码（效果很好）是...

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Diagnostics;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }
        private Stopwatch sw = new Stopwatch();

        private void button1_Click(object sender, EventArgs e)
        {
            if (button1.Text == "Start")
            {
                timer1.Enabled = true;
                sw.Start();
                button1.Text = "Stop";

            }
            else
            {
                timer1.Enabled = false;
                sw.Stop();
                button1.Text = "Start";
                textBox1.Text = label1.Text;
            }
        }

        private void timer1_Tick(object sender, EventArgs e)
        {
            int hrs = sw.Elapsed.Hours, mins = sw.Elapsed.Minutes, secs = sw.Elapsed.Seconds;

            label1.Text = hrs + ":";

            if(mins <10)
                label1.Text += "0"  + mins + ":";
            else 
                label1.Text += mins + ":";

            if (secs < 10)
                label1.Text += "0" + secs;
            else
                label1.Text += secs;
        }

        private void Form1_Load(object sender, EventArgs e)
        {

        }
    }
}

两者的计时器间隔都设置为 1000。

在网站中，时间没有增加，它保持在0:00:00...

Answer 1

尝试下面的代码。这对我有用。

在 web 源代码中添加以下代码：

<asp:scriptmanager ID="Scriptmanager1" runat="server"></asp:scriptmanager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
  <ContentTemplate>
    <asp:Label ID="Label1" runat="server" Font-Size="XX-Large"></asp:Label>
    <asp:Timer ID="tm1" Interval="1000" runat="server" ontick="tm1_Tick" />
  </ContentTemplate>
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="tm1" EventName="Tick" />
  </Triggers>
</asp:UpdatePanel>

在您的 cs 文件中添加以下源代码：

using System.Diagnostics;

public partial class ExamPaper : System.Web.UI.Page
{
    public static Stopwatch sw;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            sw = new Stopwatch();
            sw.Start();
        }
    }

    protected void tm1_Tick(object sender, EventArgs e)
    {
        long sec = sw.Elapsed.Seconds;
        long min = sw.Elapsed.Minutes;

        if (min < 60)
        {
            if (min < 10)
                Label1.Text = "0" + min;
            else
                Label1.Text = min.ToString();

            Label1.Text += " : ";

            if (sec < 10)
                Label1.Text += "0" + sec;
            else
                Label1.Text += sec.ToString();
        }
        else
        {
            sw.Stop();
            Response.Redirect("Timeout.aspx");
        }
    }
} 

Answer 2

桌面应用程序和 Web 应用程序的开发存在很大差异。

在您的 WinForm 应用程序中，该应用程序在一台电脑上的一个进程中运行。后面的代码可以不断访问用户界面并可以更新当前时间。

在Web 应用程序中，一切都不同了。网络本质上是一个断开连接、无状态的环境。这意味着服务器从世界上某个地方的浏览器获取请求，创建响应并将其发送回浏览器，然后忘记它。

这意味着浏览器中显示的用户界面与服务器上运行的代码之间没有永久连接。这就是您的代码不起作用的原因。

ASP.NET WebForms 的功能可以帮助您解决 Web 开发固有的问题，它使您相信存在某种永久连接。

我建议，为了更好地理解事情是如何工作的，从后面的代码中删除计时器并添加一个按钮，单击该按钮将更改标签文本。

要真正创建秒表，您需要在用户的浏览器中运行的代码，而不是在服务器上运行。在浏览器中运行的代码了解环境和用户界面，并且可以相应地更新内容。这是通过另一种名为 JavaScript 的编程语言完成的。

我建议从此处的教程开始。

Answer 3

您似乎完全混淆了单层有状态桌面应用程序和两层无状态 Web 应用程序。您不能只在服务器上运行代码，然后像 Windows 窗体一样神奇地更新，而无需使用大量复杂的 ajax 和 jquery 技巧。请阅读有关 HTTP、Web 服务器和 Web 浏览器实际工作原理的更多信息。