Question

我正在使用此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中不支持此属性错误。
任何建议都会有所帮助。

Answer 1

1.如何在导航到新页面时再次启动时显示计时器。您可以将计数器值存储在cookie中。这是

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

2.如何阻止用户刷新页面，以便计时器不会再次启动。

如果您使用cookie来存储值，我认为这可以解决。我不知道你对这个问题的看法。

你的目标是什么？

Answer 2

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

希望这有帮助

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

MVC中的倒数计时器

3 个答案: