如何在 MVC 视图中添加时钟

Posted 2023-05-08

【中文标题】如何在 MVC 视图中添加时钟

【英文标题】：How to add clock in View of 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 调用怎么样，或者使用客户端时间。

这里已经回答了这个问题：***.com/questions/5091888/…。您将需要使用 javascript 和 setInterval 函数。

【参考方案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;