Blazor WebAssembly (WASM) 中创建一个实时显示页面打开时长的计时器组件

在 Blazor WebAssembly (WASM) 中创建一个实时显示页面打开时长的计时器组件是一个很实用的功能。你可以通过以下步骤实现一个实时更新的计时器来计算页面打开的时长：

步骤 1: 创建计时器组件
计时器组件 (TimerComponent.razor)

@code {
    private DateTime startTime;
    private TimeSpan elapsedTime;

    protected override void OnInitialized()
    {
        startTime = DateTime.Now;
        // 设置定时器以每秒更新时间
        var timer = new System.Threading.Timer(_ => UpdateTime(), null, 0, 1000);
    }

    private void UpdateTime()
    {
        elapsedTime = DateTime.Now - startTime;
        InvokeAsync(StateHasChanged); // 请求UI更新
    }
}

<h2>Time Elapsed: @elapsedTime.ToString(@"mm\:ss")</h2>

在这个组件中，OnInitialized 方法初始化了一个 System.Threading.Timer 对象，这个计时器每秒触发一次 UpdateTime 方法。UpdateTime 方法计算页面打开以来经过的时间，并更新 elapsedTime，然后请求 UI 更新。

步骤 2: 在主组件中使用计时器组件
将计时器组件放入你的主组件（例如 MainLayout.razor 或 Index.razor）中。

MainLayout.razor 或 Index.razor

<TimerComponent />

这样，当页面加载时，计时器组件会开始计算并实时显示页面打开的时间长度。

注意
使用 System.Threading.Timer 在 Blazor WASM 中是适合的，因为它可以在 WebAssembly 环境中正常运行。
计时器在组件的生命周期内会一直运行。如果你想在特定条件下停止计时器，可以在组件的 Dispose 方法中添加逻辑来停止计时器。
这个示例只显示了分钟和秒，如果需要显示小时，可以相应地调整 elapsedTime.ToString 方法中的格式字符串。