Javascript 良好的图形时间跨度表示？_Javascript_Jquery_Asp.net Mvc_Plugins_Timespan

Javascript 良好的图形时间跨度表示？

javascript jquery asp.net-mvc plugins

Javascript 良好的图形时间跨度表示？,javascript,jquery,asp.net-mvc,plugins,timespan,Javascript,Jquery,Asp.net Mvc,Plugins,Timespan,我有一个TimeSpan保存计时记录（比如两个日期之间的一段时间），我想用一个好的图形来表示它们。是否有任何方法可以使用TimeCircles来设置表示时间的计时？我知道这个插件从一个特定的日期到现在都像计时器一样工作，但是我可以在表示我的TimeSpan值时停止计时器吗？如果没有，是否还有其他插件可以用酷图形myTimeSpan来表示代码： <div class="col-md-4"> <div class="ibox float-e-margins">

我有一个

TimeSpan

保存计时记录（比如两个日期之间的一段时间），我想用一个好的图形来表示它们。是否有任何方法可以使用

TimeCircles

来设置表示时间的计时？我知道这个插件从一个特定的日期到现在都像计时器一样工作，但是我可以在表示我的

TimeSpan

值时停止计时器吗？如果没有，是否还有其他插件可以用酷图形my

TimeSpan

来表示

代码：

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


动作节奏
乔尼：@Model.MinDate.Days

矿石：@Model.MinDate.Hours

分钟数：@Model.MinDate.Minutes

秒：@Model.MinDate.Seconds
中音节奏
乔尼：@Model.AvgDate.Days

矿石：@Model.AvgDate.Hours

分钟数：@Model.AvgDate.Minutes

秒：@Model.AvgDate.Seconds
马西莫舞步
Giorni:@Model.MaxDate.Days

Ore:@Model.MaxDate.Hours

分钟数：@Model.MaxDate.Minutes

Secondi:@Model.MaxDate.Seconds

这是一张我的时间价值观的照片

提前感谢，同时也为我的英语不好表示歉意。

您可以在使用时显示静态时间

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

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>

@model MyViewModel
$（函数（）{
//在停止状态下启动计时器，计时器将保持静态
$（“.example”）.TimeCircles（{“width”：100}）.stop（）；
});

我希望这有帮助

很高兴能帮上忙：o）