N秒后跳转的实现(动态倒计时)

╰半夏微凉° 2022-05-24 05:34 164阅读 0赞

## **效果：** ##

**![20180521174154585][]**

## **具体实现：** ##

### 实现原理： ###

两段JS代码，一段使用setTimeout实现延迟跳转，一段控制倒计时。

### 具体代码： ###

<script type="text/javascript">
    	setTimeout("javascript:location.href='${pageContext.request.contextPath}'",5000);
    </script>
    <script type="text/javascript">
    	var i = 6;
    	function showtime() {
    		i = i - 1;
    		document.getElementById("CountDown").innerHTML = i;
    		if (i > 1) {
    			setTimeout('showtime()', 1000);
    		}
    	}
    </script>
    <body οnlοad="showtime()">
    	<div id="wrapper">
    		<div id="main">
    			<header id="header">
    			<h1>
    				<span class="icon">!</span>404<span class="sub">Page Not Found</span>
    			</h1>
    			</header>
    			<div id="content">
    				<h2>您打开的这个的页面不存在！</h2>
    				<p>该页面不存在或已被删除， <span id="CountDown" style="color:red"></span> 秒后将自动为您跳转到首页......</p>
    				<div class="utilities">
    					<a class="button right" href="#" onClick="history.go(-1);return true;">返回上页</a><a class="button right" href="${pageContext.request.contextPath}">立即返回</a>
    					<div class="clear"></div>
    				</div>
    			</div>
    		</div>
    	</div>
    </body>

[20180521174154585]: /images/20220524/02680b3533c746f0859f5ae591ad6eac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，164人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery实现倒计时秒杀效果------Sestid

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c...

约定不等于承诺〃/ 2024年04月18日 11:42/ 0 赞/ 16 阅读

相关用vue实现秒杀倒计时组件

用vue实现秒杀倒计时组件开发思路代码实现下面是使用Vue实现秒杀倒计时组件 ![在这里插入图片描述][watermark_ty

绝地灬酷狼/ 2022年12月05日 05:25/ 0 赞/ 194 阅读

相关 js 实现60秒倒计时

1.dom元素 <div class="box"> <h2>剩余时间：<span class="clock">60</span>秒</h2> <

清疚/ 2022年11月21日 03:59/ 0 赞/ 251 阅读

相关 jsp倒计时跳转

这里写了页面的倒计时跳转，例子为10秒跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

墨蓝/ 2022年09月05日 15:54/ 0 赞/ 124 阅读

相关 javascript实现一个简单的5秒倒计时，并跳转

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>倒计时

Myth丶恋晨/ 2022年05月26日 04:17/ 0 赞/ 105 阅读

相关 N秒后跳转的实现(动态倒计时)

效果： ![20180521174154585][] 具体实现：实现原理：两段JS代码，一段使用setTimeout实现延迟跳转，一段控制倒计时。

╰半夏微凉°/ 2022年05月24日 05:34/ 0 赞/ 165 阅读

相关 js实现倒计时，精确到秒

效果图： ![70][] html代码： <!DOCTYPE html> <html> <head> <meta charset=

本是古典何须时尚/ 2022年05月15日 09:47/ 0 赞/ 162 阅读

相关用简单的JS实现秒倒计时

用简单的JS实现秒倒计时开发工具与关键技术：JavaScript 作者：陈希雄撰写时间：2019/2/9 当然，除了秒倒计时，还有时、分等等

àì夳堔傛蜴生んèń/ 2022年03月20日 01:52/ 0 赞/ 189 阅读

相关 js实现商城秒杀倒计时功能（动态设置秒杀时间）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3

绝地灬酷狼/ 2022年03月07日 20:46/ 0 赞/ 363 阅读

相关 react中简单倒计时跳转

1.其实在react中实现倒计时的跳转方法有很多中，其中我认为较为好用的就是通过定时器更改state中的时间值。首先在constructor中设置10秒的时间值：

灰太狼/ 2021年07月24日 19:38/ 0 赞/ 341 阅读