MVC 中的倒数计时器答案

【问题标题】：Countdown Timer in MVCMVC 中的倒数计时器
【发布时间】：2012-11-08 07:35:12
【问题描述】：

我正在使用code 在 _Layout.cshtml 页面中显示倒数计时器。
但是当我从一个页面移动到另一个页面时，计时器会在新页面加载时再次启动。 1.如何在导航到新页面时显示计时器而不重新启动。
2.如何停止用户刷新页面，使定时器不再启动。

我的布局代码：

     <table width="100%">
   <tr>
   <td width="2%">
   <img src="~/Images/philips_new.png" alt="" height="45" width="155" />
   </td>
   <td width="79%" align="right" class="Text_nocolor">
   <span class="Text_nocolor">
  @{ Html.RenderAction("GetUserName", "Login");}
   </span>
  </td>
  <td width="4%">
<div id="counter">
 </div>
 </td>
 <td width="4%" class="Text_nocolor" valign="middle">
    <a href="@Url.Action("Index", "Login", new { controller = "Login" })">
 <img src="~/Images/nome-logout.png" alt="" height="24" width="30" style="border-style: none; cursor: pointer;" /></a>
  </td>
  </tr>
 </table>

我尝试使用 jquery 插件倒数计时器，但它显示对象不支持 IE 中的此属性错误。
任何建议都会有所帮助。

【问题讨论】：

停止刷新是什么意思？
当用户刷新页面时，计时器又从头开始计时。
那将会发生。您可以将值存储在 cookie 中并从 cookie 中读取。

标签： c# asp.net asp.net-mvc asp.net-mvc-3

【解决方案1】：

1.导航到新页面时如何在不重新启动的情况下显示计时器。您可以将计数器值存储在 cookie 中。这是

简单的方法，你可以在页面之间传递值。

2.如何停止用户刷新页面，使定时器不再启动。

如果您使用cookie来存储值，我认为这可以解决。不知道你说的这个问题是什么意思。

你的具体目标是什么？

【讨论】：

有没有其他不使用cookies的方法？因为如果浏览器禁用了 cookie，则此功能将不起作用
Yes Sure.. 让我再检查一下并回复你
看看能不能用localStorage

【解决方案2】：

使用 ajax 函数调用将计时器值存储在会话中的操作。因此，即使用户刷新页面，您仍然拥有当前值。

希望对你有帮助

【讨论】：

【解决方案3】：

您可以在每次回发或页面刷新时使用与服务器端代码同步的 javascript 时间。

使用以下代码

 var dt = '@ViewBag.EndDate';
var dateAr = dt.split('-');
var newDate = dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2];

var end = new Date(dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2]);

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;

function showRemaining() {
   var now = new Date();
   var distance = end - now;
   if (distance &lt; 0) {
       clearInterval(timer);
       document.getElementById('countdown').innerHTML = 'EXPIRED!';
       window.location.href = '/Home/Index';

       return;
   }
var days = Math.floor(distance / _day);
var hours = Math.floor((distance % _day) / _hour);
var minutes = Math.floor((distance % _hour) / _minute);
var seconds = Math.floor((distance % _minute) / _second);


document.getElementById('countdown').innerHTML = hours + 'hrs ';
document.getElementById('countdown').innerHTML += minutes + 'mins ';
document.getElementById('countdown').innerHTML += seconds + 'secs';

}

timer = setInterval(showRemaining, 1000);

你可以关注这个链接

http://www.csharptrick.com/2014/09/count-timer-asp-net-mvc-exams/

【讨论】：

上面的死链接