今天总结一下之前做的系统中,系统如果出现错误后,倒计时5秒并跳转到指定页面的错误页面404.jsp.
下面是一个简单的demo.
第一步,直接创建一个web项目javascriptTest,在WebRoot中创建一个404.jsp页面,这个页面就是用来跳转的。
第二步,写404.jsp的代码,如下:
<%@ page language="java" contentType="text/html; charset=utf-8"
isErrorPage="true" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>错误提示</title>
<style type="text/css">
#wrapper{text-align:center;margin:100px auto;width:594px;}
.{-webkit-transition:opacity 0.5s ease-in-out;-moz-transition:opacity 0.5s ease-in-out;transition:opacity 0.5s ease-in-out;}
</style>
</head>
<body>
<strong><script type="text/javascript" src="../page/js/jquery-1.7.min.js"></script></strong>
<!--解决 IE6 背景缓存-->
<!--[if IE 6]><script type="text/javascript">document.execCommand("BackgroundImageCache", false, true);</script><![endif]-->
<script type="text/javascript">
var start = 5;
var step = -1;
function count() {
document.getElementById("div1").innerHTML = "你正在寻找的页面无法找到...页面将在" + start + "秒后返回登录页面";
start += step;
if (start <= 0) {
start = 5;
window.location = "http://localhost:8080/fuzz"; //重定向
}
setTimeout("count()", 1000);
}
window.onload = count;
</script>
<body>
<div id="wrapper">
<div>
<h1>糟糕!</h1>
<div id="div1"></div>
<br /><br /><br />
</div>
</div>
<!-- <div id="wrapper">
<div>
<h1>糟糕!</h1>
<p>你正在寻找的页面无法找到...<a style="color:#ff6600;" href="http://localhost:8080/fuzz">可能在这里!</a></p>
<a class="link" href="/" οnclick="history.go(-1)"><span id="sec">5</span> 秒后返回登录页面</a>
<br /><br /><br />
</div>
</div> -->
<!--
<script type="text/javascript">
$(function() {
setTimeout("lazyGo();", 1000); //在一秒之后执行lozyG0()这函数
});
function lazyGo() {
var sec = $("#sec").text();
$("#sec").text(--sec); //text()设置或返回被选元素的文本内容。
if (sec > 0)
setTimeout("lazyGo();", 1000);
else
window.location.href = "http://localhost:8080/fuzz";
}
</script> -->
</body>
</html>