Question

我有TimeSpan我保存我的时间记录（例如两个日期之间的时间段），我想用一个好的图形来表示它们。有没有办法设置使用TimeCircles表示的时间？我知道这个插件的工作方式就像从特定日期到现在的计时器，但我可以在表示TimeSpan值时停止计时器吗？如果没有，是否还有其他插件可以用我的TimeSpan

来表示酷炫的图形

CODE：

<div class="col-md-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">Tempo di gestione minimo</div>
        <div class="ibox-content">
            <h2>
                Giorni: @Model.MinDate.Days<br />
                Ore: @Model.MinDate.Hours<br />
                Minuti: @Model.MinDate.Minutes<br />
                Secondi: @Model.MinDate.Seconds
            </h2>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">Tempo di gestione medio</div>
        <div class="ibox-content">
            <h2>
                Giorni: @Model.AvgDate.Days<br />
                Ore: @Model.AvgDate.Hours<br />
                Minuti: @Model.AvgDate.Minutes<br />
                Secondi: @Model.AvgDate.Seconds
            </h2>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">Tempo di gestione massimo</div>
        <div class="ibox-content">
            <h2>
                Giorni: @Model.MaxDate.Days<br />
                Ore: @Model.MaxDate.Hours<br />
                Minuti: @Model.MaxDate.Minutes<br />
                Secondi: @Model.MaxDate.Seconds
            </h2>
        </div>
    </div>
</div>

这是我的时间值的图片

提前致谢，也很抱歉我的英语不好。

Answer 1

您可以使用TimeCircles显示静态时间。

如果您将时间跨度转换为秒数：

public ActionResult Index()
{
    // ... retrieve your timespan here ...
    var time = new TimeSpan(1,2,3);
    var seconds = time.TotalSeconds;

    var responseModel = new MyViewModel
    {
        TimeInSeconds = seconds;
    };

    return View(responseModel);
}

然后在你的页面中，将插件初始化为停止状态，这似乎可以正常工作并以天，小时，分钟，秒显示时间......

@model MyViewModel

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.css" rel="stylesheet" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/timecircles/1.5.3/TimeCircles.js"></script>
</head>
<body>
    <script type="text/javascript">
    $(function() {
        // Start the timer in a stopped state and it will remain static
        $(".example").TimeCircles({ "width": 100 }).stop();
    });
    </script>

    <div class="example" data-timer="@Model.TimeInSeconds" style="width:400"></div>
</body>
</html>

我希望这有帮助！

良好的图形TimeSpan表示？

1 个答案: