公司平台更新，做了一个倒计时跳转新平台的界面。
思路：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>
浙公网安备 33010602011771号