思路:1.从服务器端调用初始化的时间差给客户端的hidden赋值(服务器端获取增强了时间的准确性)。
2.然后客户端js 没一秒将时间差减1
具体mvc代码:
@{ Layout = null; } <!DOCTYPE html> <html> <head> <title>open</title> <script type="text/javascript"> function dayleft() { if (@ViewData["dateleft"]<0 ) { window.parent.location.href = 'PageJump'; } } window.onload=dayleft(); </script> </head> <body > @{ DateTime timeNow = DateTime.Now; DateTime timeTO = new DateTime(2014, 3,20, 0, 0, 0); TimeSpan ts = timeTO.Subtract(timeNow); @Html.Hidden("Dateleft", ts.Days.ToString()); @Html.Hidden("Hourleft", ts.Hours.ToString()); @Html.Hidden("Minuteleft", ts.Minutes.ToString()); @Html.Hidden("Secondleft", ts.Seconds.ToString()); @Html.Hidden("aa", ""); } <div> <div id="pd0u2" style="text-align: center" data-label="状态1"> <div id="u3" class="u3_container"> <div id="u3_img" class="u3_normal detectCanvas"> </div> <div id="u4" class="u4" style="visibility: hidden;"> <div id="u4_rtf"> </div> </div> </div> <div id="u5" class="u5"> <div id="u5_rtf"> <p style="text-align: center;"> <span style="font-family: 微软雅黑; font-size: 36px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">【系统公告】</span></p> </div> </div> <div id="u6" class="u6"> <div id="u6_rtf"> <p style="text-align: left;"> <span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">201</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">4</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">-01-</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">15</span></p> </div> </div> <div id="u7" class="u7"> <div id="u7_line" class="u7_line"> </div> </div> <div id="u8" class="u8"> <div id="u8_rtf"> <p style="text-align: left;"> <span style="font-family: 微软雅黑; font-size: 13px; font-weight: bold; font-style: normal; text-decoration: none; color: #333333;">公告</span></p> </div> </div> <div id="u9" class="u9"> <div id="u9_rtf"> <p style="text-align: left;"> <span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">尊敬的经销商用户:</span></p> </div> </div> <div id="u10" class="u10"> <div id="u10_rtf"> <p style="text-align: left;"> <span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">为了给用户提供更好的服务,我公司于2014-03-20</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;"></span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">对本系统</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">进行</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">改版,在升级期间可能会造成用户的使用受到影响,请您</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">稍后</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">再尝试使用,我公司会尽快完成系统</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">升级维护工作,由此给广大用户带来的不便敬请谅解。</span></p> </div> </div> <div id="u11" class="u11"> <div id="u11_rtf"> <p style="text-align: center;"> <span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">感谢您对</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">车易拍</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">公司的支持与理解,谢谢。</span></p> </div> </div> <div id="u12" class="u12"> <div id="u12_rtf"> <p style="text-align: right;"> <span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">北京巅峰科技</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">有限</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">公司</span></p> </div> </div> <div id="u13" class="u13"> <div id="u13_rtf"> <p style="text-align: right;"> <span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">2014年01月</span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;"></span><span style="font-family: 微软雅黑; font-size: 13px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">15日</span></p> </div> </div> <div id="u14" class="u14"> <div id="u14_rtf"> <p style="text-align: center;"> <span style="font-family: 微软雅黑; font-size: 20px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">还剩</span><span id="day" style="font-family: 微软雅黑; font-size: 20px; font-weight: normal; font-style: normal; text-decoration: none; color: #0000FF;">14</span><span style="font-family: 微软雅黑; font-size: 20px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">天</span><span id="hour" style="font-family: 微软雅黑; font-size: 20px; font-weight: normal; font-style: normal; text-decoration: none; color: #0000FF;">13</span><span style="font-family: 微软雅黑; font-size: 20px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">小时</span><span id="minute" style="font-family: 微软雅黑; font-size: 20px; font-weight: normal; font-style: normal; text-decoration: none; color: #0000FF;">30</span><span style="font-family: 微软雅黑; font-size: 20px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">分</span><span id="sencond" style="font-family: 微软雅黑; font-size: 20px; font-weight: normal; font-style: normal; text-decoration: none; color: #FF0000;">58</span><span style="font-family: 微软雅黑; font-size: 20px; font-weight: normal; font-style: normal; text-decoration: none; color: #333333;">秒</span></p> </div> </div> </div> </div> <script type="text/javascript"> Hourleft = document.getElementById("Hourleft").value; Minuteleft = document.getElementById("Minuteleft").value; Dateleft = document.getElementById("Dateleft").value; Secondleft = document.getElementById("Secondleft").value; startclock() function showtime() { Secondleft = Secondleft - 1; if (Secondleft < 0) { Secondleft = 60 + Secondleft; Minuteleft = Minuteleft - 1; } if (Minuteleft < 0) { Minuteleft = 60 + Minuteleft; Hourleft = Hourleft - 1; } if (Hourleft < 0) { Hourleft = 24 + Hourleft; Dateleft = Dateleft - 1; } var day = document.getElementById("day"); var hour = document.getElementById("hour"); var Minute = document.getElementById("minute"); var Second = document.getElementById("sencond"); day.innerHTML = Dateleft; hour.innerHTML = Hourleft; Second.innerHTML = Secondleft; Minute.innerHTML = Minuteleft; if (Dateleft <= 0 && Hourleft <= 0 && Secondleft <= 0 && Minuteleft <= 0) { window.parent.location.href = 'PageJump'; } else { timerID = setTimeout("showtime()", 1000); timerRunning = true; } } var timerID = null; var timerRunning = false; function stopclock() { if (timerRunning) clearTimeout(timerID); timerRunning = false; } function startclock() { stopclock(); showtime(); } // --> </script> </body> </html>