公司平臺更新，作了一個倒計時跳轉新平臺的界面。
思路：1.從服務器端調用初始化的時間差給客戶端的hidden賦值（服務器端獲取加強了時間的準確性）。javascript
2.而後客戶端js 沒一秒將時間差減1html
具體mvc代碼：java
@{
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>
相關文章
- 1. 平臺 大賽 公司
- 2. Android平臺的代碼熱更新
- 3. 【Unity】Android平臺的代碼熱更新
- 4. Unity3D在android平臺跳轉至桌面
- 5. 倒計時跳轉頁面
- 6. 作品：某公募基金公司自動化工作平臺
- 7. server2008 跨進新的平臺
- 8. 連平新視界公社
- 9. Android更新平臺架構方案
- 10. 小米新一代大數據統計平臺大公開
- 更多相關文章...
- • ionic 平臺 - ionic 教程
- • 操作系統（OS）平臺 統計 - 瀏覽器信息
- • RxJava操作符（一）Creating Observables
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 平臺 大賽 公司
- 2. Android平臺的代碼熱更新
- 3. 【Unity】Android平臺的代碼熱更新
- 4. Unity3D在android平臺跳轉至桌面
- 5. 倒計時跳轉頁面
- 6. 作品：某公募基金公司自動化工作平臺
- 7. server2008 跨進新的平臺
- 8. 連平新視界公社
- 9. Android更新平臺架構方案
- 10. 小米新一代大數據統計平臺大公開