时间戳

首页 > 解决方案 > Blazor 中的秒表组件

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;
    }
}

标签： timerblazorstopwatch

解决方案

你需要一个定时器：

@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您想要的方式和位置。

推荐阅读