zoukankan      html  css  js  c++  java
  • 公司平台更新,做了一个倒计时跳转新平台的界面。

    思路: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>
    
  • 相关阅读:
    软件工程第十四周学习进度条
    软件工程第十五周学习进度条
    课堂练习-买书价格最低
    找水王2
    Struts结合马士兵视频的学习经验
    Spring结合马士兵视频的学习经验
    浅谈 《大型网站技术架构》 五六七章
    以《淘宝网》为例,描绘质量属性的六个常见属性场景
    浅谈架构漫谈
    软件架构设计师工作流程
  • 原文地址:https://www.cnblogs.com/haihang/p/3545536.html
Copyright © 2011-2022 走看看