MVC 中的倒数计时器

Posted 2023-04-01

【中文标题】MVC 中的倒数计时器

【英文标题】：Countdown Timer in MVC

【发布时间】：2012-11-08 07:35:12

【问题描述】：

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

我的布局代码：

     <table >
   <tr>
   <td >
   <img src="~/Images/philips_new.png"    />
   </td>
   <td  align="right" class="Text_nocolor">
   <span class="Text_nocolor">
  @ Html.RenderAction("GetUserName", "Login");
   </span>
  </td>
  <td >
<div id="counter">
 </div>
 </td>
 <td  class="Text_nocolor" valign="middle">
    <a href="@Url.Action("Index", "Login", new  controller = "Login" )">
 <img src="~/Images/nome-logout.png"    style="border-style: none; cursor: pointer;" /></a>
  </td>
  </tr>
 </table>

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

【问题讨论】：

停止刷新是什么意思？

当用户刷新页面时，计时器又从头开始计时。

那将会发生。您可以将值存储在 cookie 中并从 cookie 中读取。

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

【讨论】：

上面的死链接