如何在 MVC 视图中添加时钟

【问题标题】：How to add clock in View of MVC如何在 MVC 视图中添加时钟
【发布时间】：2014-09-27 00:11:33
【问题描述】：

我在 jquery 移动标题中有以下几行 html 代码来显示时间。它现在是静态的，因为它仅在刷新页面时刷新。如何在不刷新页面的情况下定期更新时间？

<div id="updateTime">
    <span>@DateTime.Now.ToShortDateString()</span><br />
    @{
        CultureInfo ci = new CultureInfo("en-US");
        string formatedDate = DateTime.Now.ToString("t", ci);
    }
</div>

【问题讨论】：

AJAX 调用怎么样，或者使用客户端时间。
这里已经回答了这个问题：stackoverflow.com/questions/5091888/…。您将需要使用 javascript 和 setInterval 函数。

标签： javascript jquery asp.net-mvc html

【解决方案1】：

我在之前的项目中使用过 jClock，它一直运行良好： https://github.com/dsparling/jclock

安装插件js文件后可以这样调用：

$(document).ready(function () {
    $('.jclock').jclock({format: '%I:%M:%S %p'});
});

示例样式：

.jclock
{
    background-color:Navy;  color: #ffffff;
    font-weight: bold;
    font-size: 64pt;
    text-align: center;
    height: 100px;
    text-shadow: 2px 2px 2px #fff;
    border-radius: 15px 15px 0px 0px; 
    -moz-border-radius: 15px 15px 0px 0px; 
    -webkit-border-radius: 15px 15px 0px 0px;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: black;
}

【讨论】：