Timer Blazor中的秒表组件

经过多次探索，我们没有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;
    }
}

@使用系统诊断；
开始

停止

@代码
{    
受保护的覆盖无效OnInitialized（）
{
base.OnInitialized（）；
秒表sw=新秒表（）；
TimeSpan tt1=TimeSpan.0；
}
私人双延时；
私人日期时间开始时间；
私有日期时间停止时间；
私有布尔运行=假；
公开作废开始（）
{
this.startTime=DateTime.Now；
这是真的；
}
公共停车场（）
{
this.stopTime=DateTime.Now；
this.running=false；
}
公共双ElapsedTimeSecs（）
{
时间间隔；
如果（正在运行）
间隔=日期时间。现在-开始时间；
其他的
间隔=停止时间-开始时间；
返回间隔。总秒数；
}
}

您需要一个计时器：

@implements IDisposable

...

private System.Threading.Timer _timer;

public void Start()
{
    this.startTime = DateTime.Now;        
    _timer = new System.Threading.Timer(async _ =>
    {
        elapsedtime = ElapsedTimeSecs();
        await InvokeAsync(StateHasChanged);
    }, null, 0, 1000);
}

public void Stop()
{
    this.stopTime = DateTime.Now;
    _timer?.Dispose();
    _timer = null;
}

public void Dispose()
{
    _timer?.Dispose();
}

---

然后显示

elapsedtime

您想要它的方式和位置。

谢谢，关于在ui页面上显示计时器（运行时钟）的任何建议谢谢，我正在努力为这个blazor倒计时组件编写单元测试。有什么想法吗？整个测试都是回归测试。将其分解以测试启动和停止条件以及时间计算。