一个漂亮的带倒计时的404页面

简介: 1、CSS\StyleSheet.css文件 body { font-size: 9pt; color: #1984e6;...

1、CSS\StyleSheet.css文件

 body
        {
            font-size: 9pt;
            color: #1984e6;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: none;
        }
        table
        {
            font-size: 9pt;
            color: #1984e6;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: none;
        }
        td
        {
            font-size: 9pt;
            color: #1984e6;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: none;
        }
        body
        {
            scrollbar-highlight-color: buttonface;
            scrollbar-shadow-color: buttonface;
            scrollbar-3dlight-color: buttonhighlight;
            scrollbar-track-color: #eeeeee;
            background-color: #ffffff;
        }
        a
        {
            font-size: 9pt;
            color: #1984e6;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: none;
        }
        a:hover
        {
            font-size: 9pt;
            color: #ff0000;
            line-height: 16pt;
            font-family: "Tahoma" , "宋体";
            text-decoration: underline;
        }
        h1
        {
            font-size: 9pt;
            font-family: "Tahoma" , "宋体";
        }


2、Image\404.jpg 图片


3、HTMLPage.htm文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>对不起,您访问的页面不存在 请转到首页进入</title>
    <meta http-equiv="Content-Type" content="text/html; charset=GB2312"/>
    <link href="Css/StyleSheet.css" rel="stylesheet" type="text/css" />
    <meta content="MSHTML 6.00.2800.1458" name="GENERATOR"/>
</head>
<body topmargin="20">
    <table cellspacing="0" width="600" align="center" border="0" cepadding="0">
        <tbody>
            <tr colspan="2">
                <td>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td>
                                <p>
                                    <strong><font color="#ba1c1c">HTTP404错误</font></strong>:</p>
                                <p>
                                    没有找到您要访问的页面,请检查您是否输入正确URL。</p>
                            </td>
                            <td>
                                <p>
                                    <img height="100" src="Image/404.jpg" width="100" border="0" alt="" /></p>
                            </td>
                        </tr>
                    </table>
                    <hr size="0" />
                    请尝试以下操作:
                    <p>
                        ·如果您已经在地址栏中输入该网页的地址,请确认其拼写正确。<br />
                        ·打开该站点主页,然后查找指向您感兴趣信息的链接。<br />
                        ·单击<a href="javascript:history.back(1)"><font color="#BA1C1C">后退</font></a>链接,尝试其他链接。<br />
                        ·单击单击<a href="javascript:doSearch()"><font color="#BA1C1C">搜索</font></a>链接,寻找Internet上的信息。</p>
                    <p align="right">
                        如果您在浏览本站时,多次出现此错误,请与管理员联系</p>
                    <hr size="0" />
                    <form name="loading" id="loading" runat="server">
                    <p align="center">
                        <font face="Arial" color="#0066ff" size="2">loading...</font>
                        <input style="padding-right: 0px; padding-left: 0px; font-weight: bolder; padding-bottom: 0px;
                            color: #0066ff; border-top-style: none; padding-top: 0px; font-family: Arial;
                            border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none"
                            size="46" name="chart" />
                        <br />
                        <input style="border-right: medium none; border-top: medium none; border-left: medium none;
                            color: #0066ff; border-bottom: medium none; text-align: center" size="47" name="percent" />

                        <script type="text/javascript" language="javascript">
                        var bar=0
                        var line="││"
                        var amount="││"
                        count()
                        function count(){
                        bar=bar+2
                        amount =amount + line
                        document.loading.chart.value=amount
                        document.loading.percent.value=bar+"%"
                        if (bar<100)
                        {setTimeout("count()",150);}
                        else
                        {window.location ="http://www.51ascx.com";}   //http://www.51ascx.com也可以跳到项目中的指定页面   Default.aspx
                        }
                        </script>

                    </p>
                    </form>
                    <br />
                       <br />
                    </p><!------------End this!--------------->
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>


4、Global.asax文件中控制出现错误时的转向页面为HTMLPage.htm

<%@ Application Language="C#" %>

<script runat="server">

    void Application_Start(object sender, EventArgs e) 
    {
        //在应用程序启动时运行的代码

    }
    
    void Application_End(object sender, EventArgs e) 
    {
        //在应用程序关闭时运行的代码

    }
        
    void Application_Error(object sender, EventArgs e) 
    { 
        //在出现未处理的错误时运行的代码
        Response.Redirect("HTMLPage.htm");
    }

    void Session_Start(object sender, EventArgs e) 
    {
        //在新会话启动时运行的代码

    }

    void Session_End(object sender, EventArgs e) 
    {
        //在会话结束时运行的代码。 
        // 注意: 只有在 Web.config 文件中的 sessionstate 模式设置为
        // InProc 时,才会引发 Session_End 事件。如果会话模式 
        //设置为 StateServer 或 SQLServer,则不会引发该事件。

    }
       
</script>


页面效果为:



相关文章
|
4月前
|
C#
C# 如何使用倒计时
C# 如何使用倒计时
179 0
|
23天前
|
JavaScript
简单倒计时
【8月更文挑战第29天】原理:定的时间 -现在时间=时间差 讲时间差转换成时 分 秒 显示出来
28 0
|
4月前
javascri实现定时轮播 ,以及点击轮播
javascri实现定时轮播 ,以及点击轮播
29 3
|
4月前
做一个发送短信的倒计时按钮(很常用)
做一个发送短信的倒计时按钮(很常用)
27 0
|
4月前
|
开发者 智能硬件
倒计时器
倒计时器
129 1
|
4月前
uniapp实现倒计时
uniapp实现倒计时
107 0
倒计时代码-附效果图
倒计时代码-附效果图
倒计时功能制作
今天制作一个商城项目距离抢购还剩多长时间的一个小功能 首先要知道这个倒计时是不断的变化的,所以需要用到定时器来自动变化(setInterval),有三个标签存放时分秒,再利用innerHTML将计算出来的时间放入三个标签内,第一次执行也是间隔毫秒数,因此刷新页面会有空白,我们最好采取封装函数的方式,这样可以先调用一次这个函数,防止刚开始刷新页面有空白问题。