Blazor 中的秒表组件

Question

经过大量探索后，我们还没有 blazor 组件秒表。我需要在 blazor 页面中显示经过的时间下面是我的代码，我们可以使用开始和停止按钮计算经过的时间我有点困惑如何在 blazor 页面中调用和显示经过的时间。有什么建议吗？

@using System.Diagnostics;

<p> <button @onclick=@Start>Start</button></p>
<p> <button @onclick=@Stop>Stop</button></p>

@code
{    
    protected override void OnInitialized()
    {
        base.OnInitialized();
        Stopwatch sw = new Stopwatch();
        TimeSpan tt1 = TimeSpan.Zero;    
    }

    private double elapsedtime;
    private DateTime startTime;
    private DateTime stopTime;
    private bool running = false;

    public void Start()
    {
        this.startTime = DateTime.Now;
        this.running = true;
    }

    public void Stop()
    {
        this.stopTime = DateTime.Now;
        this.running = false;
    }

    public double ElapsedTimeSecs()
    {
        TimeSpan interval;
        if (running)
            interval = DateTime.Now - startTime;
        else
            interval = stopTime - startTime;
        return interval.TotalSeconds;
    }
}

Answer 1

正如 Henk Holterman 所说，您需要一个计时器。但为了使计时器执行的操作线程安全且可控（暂停、恢复、停止等），您需要大量样板代码。

我在 Blazor 中创建了一个秒表演示，其中基于 Timer 的操作由名为 Recurop 的库处理，该库将 Timer 操作抽象为 RecurringOperation 对象，并使代码更加简单和清晰，并且使您能够将 UI 元素属性绑定到对重复操作（计时器操作）的状态/状况的变化做出反应。例如，在操作运行时启用“暂停”按钮，但在操作停止时禁用“暂停”按钮等。

如果您想查看运行中的 Blazor 秒表网页，请访问： https: //tdmr87.github.io/BlazorStopwatchWithRecurop/

如果您想查看 Blazor 中秒表演示的代码，请访问： https: //github.com/TDMR87/BlazorStopwatchWithRecurop

如果您对处理重复操作（计时器）的库感兴趣，请访问 Recurop github 页面： https: //github.com/TDMR87/Recurop

Recurop 是我的个人项目，如果您想尝试一下，可以在 NuGet 上找到它。

干杯