JS倒计时页面跳转

最新推荐文章于 2023-09-29 21:36:44 发布
最新推荐文章于 2023-09-29 21:36:44 发布
阅读量52 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/stoneryan/p/4201669.html
版权 
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>页面提示</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv='Refresh' content='3;URL=javascript:history.back(-1);'>
<link rel="stylesheet" type="text/css" href="/Public/Css/style.css" />
</head>
<body>
<div class="message">
<table class="message"  cellpadding=0 cellspacing=0 >
    <tr>
        <td height='3'  class="topTd" ></td>
    </tr>
    <tr class="row" >
        <th class="tCenter space">操作失败！</th>
    </tr>
        <tr class="row">
        <td style="color:red">本产品已过修改期！</td>
    </tr>        <tr class="row">
        <td>系统将在 <span id="wait" style="color:blue;font-weight:bold">3</span> 秒后自动跳转,如果不想等待,直接点击 <a id="href" href="javascript:history.back(-1);">这里</a> 跳转</td>
    </tr>    <tr>
        <td height='3' class="bottomTd"></td>
    </tr>
    </table>
</div>
<script type="text/javascript">
(function(){
var wait = document.getElementById('wait'),href = document.getElementById('href').href;
var interval = setInterval(function(){
    var time = --wait.innerHTML;
    (time == 0) && (location.href = href);
}, 1000);    
})();
</script>
</body>
</html>


2.
<title>
</title>   
<script language="JavaScript" type="text/javascript">
	function delayURL(url) {
		var delay = document.getElementById("time").innerHTML;
		if(delay > 0) {
			delay--;
			document.getElementById("time").innerHTML = delay;
		} else {
			window.top.location.href = url;
		}
		setTimeout("delayURL('" + url + "')", 1000);
	}
</script>
<span id="time" style="background: #00BFFF">3</span>秒钟后自动跳转，如果不跳转，请点击下面的链接<a href="http://www.baidu.com">我的百度</a>
<script type="text/javascript">
delayURL("http://www.baidu.com");
</script>

 
  
 
 
  




 
 
 
 
 
 

 

转载于:https://www.cnblogs.com/stoneryan/p/4201669.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30898109
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
Javascript案例——01跳转页面、倒计时

				
			

			

				

					weixin_44364634的博客
				

				

					01-14
					
					515
					
				

			

		

		

			
				
JS的20个实例案例经典

			
		

	



                

              
                



	

		

			

				
					
Javascript之页面倒计时

				
			

			

				

					weixin_45779841的博客
				

				

					03-08
					
					541
					
				

			

		

		

			
				
本文将从需求实现的角度，逐步讲解如何在页面上实现倒计时效果，其中部分涉及到的知识会做拓展讲解，最后将所有代码封装，适用于不同情况下倒计时功能的实现。

一、分析需求
要实现倒计时效果，可拆解为以下三个部分进而逐个击破：
1、 使用Date方法计算对应倒计时的数据并返回
2、 利用DOM操作将得到的数据渲染到页面中
3、 通过JavaScript原生API（setInterval或setTimeo...

			
		

	



                


  
              

                


	

		

			

				
					
js原生实现倒计时

					
最新发布

				
			

			

				

					m0_50037012的博客
				

				

					09-29
					
					406
					
				

			

		

		

			
				
最近在制作网站的404错误页面，想做一个倒计时结束跳转的效果，从网上看了很多教程和方法都没有找到简单合适的，于是自己编写了一个，现在分享出来，供大家参考。如上，就能完美实现倒计时结束跳转了。

			
		

	





	

		

			

				
					
JS实现倒计时三秒跳转后到新页面

				
			

			

				

					让编程改变世界
				

				

					11-05
					
					2万+
					
				

			

		

		

			
				
为了是网站的页面更友好，更加人性化，我们往往会在操作错误或是成功的时候进行提示然后跳转到相应的页面。同时为了使页面更加美化，我们往往会加上倒计时跳转功能，也就是使网页上的秒杀呈现倒数显示。下面就是具体的实现过程。


1、添加mate



        这个mate的功能就是实现跳转，content中的内容3就是三秒后跳转，url就是所要跳转的地址。光有这些还不够，我们只知道三秒

			
		

	



		

			
		



	

		

			

				
					
js控制n秒后跳转到指定页面，并显示倒计时

					
热门推荐

				
			

			

				

					ft的专栏
				

				

					09-04
					
					2万+
					
				

			

		

		

			
				
setTimeout


    
        
        
    





//设定倒数秒数
var t = 10;
//显示倒数秒数
function showTime(){
    t -= 1;
    document.getElementById('div1').innerHTML= t;
    if(t==0){
        location.href='http

			
		

	





	

		

			

				
					
Javascript倒计时页面跳转

				
			

			

				

					weixin_30920597的博客
				

				

					09-11
					
					93
					
				

			

		

		

			
				
Javascript倒计时页面跳转
			
	
	
		在js中实现页面定时跳转我们要使用setInterval或setTimeOut函数，还可以使用页面的meta实现。例1：<scripttype="text/javascript"language="JavaScript">varstartTime=newDate();v...

			
		

	





	

		

			

				
					
js 倒计时跳转页面

				
			

			

				

					weixin_34220179的博客
				

				

					02-25
					
					75
					
				

			

		

		

			
				
&lt;script type="text/javascript"&gt;var i = 5; var intervalid; intervalid = setInterval("fun()", 1000); function fun() { if (i == 0) { window.location.href = "&lt;%=basePath%&gt;home"; clearInterval(...

			
		

	





	

		

			

				
					
Javascript倒计时页面跳转实例小结

				
			

			

				

					10-26
				

			

		

		

			
				
在JavaScript中，实现倒计时页面跳转是常见的需求，主要应用于在线考试、限时优惠活动等场景。本文将深入解析几种不同的实现方法。  首先，我们可以使用`setInterval`或`setTimeout`函数来创建一个定时器，让页面在...

			
		

	





	

		

			

				
					
javascript实现倒计时跳转页面

				
			

			

				

					10-22
				

			

		

		

			
				
实现倒计时跳转页面的核心原理在于利用JavaScript的定时器函数和页面跳转的API。其中，`setInterval()`函数被用来设置一个定时器，它会在指定的时间间隔内重复执行特定的函数。在这个例子中，每隔一秒钟执行一次`...

			
		

	





	

		

			

				
					
JavaScript实现倒计时跳转页面功能【实用】

				
			

			

				

					10-20
				

			

		

		

			
				
在本文中，我们将探讨如何使用JavaScript实现一个倒计时跳转页面的功能，这在许多网页应用中非常常见，比如表单提交后的确认页面。  首先，我们需要在HTML页面中设置一个用于显示倒计时的元素，通常是`<span>`或`...

			
		

	





	

		

			

				
					
asp.net中倒计时自动跳转页面的实现方法(使用javascript)

				
			

			

				

					10-27
				

			

		

		

			
				
- 在需要跳转的页面通过服务器端重定向或者前端JavaScript导航至倒计时页面。  需要注意的是，在实际应用中，可能需要根据实际的URL地址对文章中的`XXXXX/Home.aspx`进行替换。另外，倒计时的初始值可以根据实际需求...

			
		

	





	

		

			

				
					
js倒计时页面跳转

				
			

			

				

					weixin_34080903的博客
				

				

					07-06
					
					131
					
				

			

		

		

			
				
HTML：

<p><span id="timer">60</span>s 后跳转到百度首页</p>

JS：

//倒计时方法
function TimeLocation = (href, elemId) => {
  var elem = document.getElementById(elemId);
  var int...

			
		

	





	

		

			

				
					
js倒计时跳转页面

				
			

			

				

					阳光
				

				

					04-19
					
					1933
					
				

			

		

		

			
				
<script type="text/javascript">
	var t = 3;//设定跳转的时间
	var timer =setInterval("refer()", 1000); //启动1秒定时
	function refer() {
		if (t == 0) {
			clearInterval(timer);
			location = "/login.do"; /...

			
		

	





	

		

			

				
					
js实现倒计时跳转页面

				
			

			

				

					Rocky balboa
				

				

					01-02
					
					4409
					
				

			

		

		

			
				
步骤
1显示页面效果，
2倒计时读秒效果实现
      2.1定义一个方法，获取span标签，修改span标签体内容，时间---------；
      2.2定义一个定时器，一秒执行一次该方法
3在方法中判断如果时间<0，则跳转页面。
**<!DOCTYPE html>
<html lang="en">
<head>
    <meta

			
		

	





	

		

			

				
					
Javascript倒计时显示页面跳转

				
			

			

				

					郭海龙的技术博客
				

				

					12-17
					
					103
					
				

			

		

		

			
				
[code="Javascript"]
javaScript页面跳转的效果：

     5秒钟后，页面会自动跳转，如果不跳转请单击下面的链接回到主页


function delayURL(url) {
 var delay = document.getElementById("time").innerHTML;//拿到标签id=time的值
 if(delay > 0) {//...

			
		

	





	

		

			

				
					
JavaScript 倒计时页面跳转

				
			

			

				

					Kevin's life
				

				

					01-31
					
					551
					
				

			

		

		

			
				
今天学习JavaScript，看到一个页面跳转的实例，联想起我们做的ITOO考试系统的交卷页面和访问网站的时候提交数据成功或者出现错误页面跳转，效果是一样的。


代码展示：




    

    倒数跳转页面

    
        /*P标签样式*/
        p {
            text-align: center; /*居中*/
            

			
		

	





	

		

			

				
					
JS实现页面倒计时跳转到指定页面

				
			

			

				

					A_jungle的博客
				

				

					04-24
					
					1989
					
				

			

		

		

			
				
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;script type="text/javascript"&gt;
window.onload = func

			
		

	





	

		

			

				
					
js页面倒计时自动跳转

				
			

			

				

					Anna的专栏
				

				

					01-03
					
					537
					
				

			

		

		

			
				
var t = 6;     function exec(){        var s = document.getElementById("sec");        t--;         if(t               location.href="url";               return;        }

			
		

	





	

		

			

				
					
js倒计时5秒跳转页面

				
			

			

				

					09-19
				

			

		

		

			
				
使用JavaScript编写倒计时并在5秒后跳转页面的代码如下所示：

```html
<!DOCTYPE html>
<html>
<head>
    <title>倒计时页面跳转</title>
</head>
<body>
    <h1>倒计时页面跳转</h1>
    <p id="countdown">正在倒计时：5秒</p>

    <script type="text/javascript">
        var countdownElem = document.getElementById("countdown");
        var countdownTime = 5;

        var countdown = setInterval(function() {
            countdownElem.innerText = "正在倒计时：" + countdownTime + "秒";
            countdownTime--;
            
            if (countdownTime <= 0) {
                clearInterval(countdown); // 清除倒计时
                window.location.href = "http://www.example.com"; // 页面跳转到指定URL
            }
        }, 1000);
    </script>
</body>
</html>
```

以上代码中，我们首先通过`document.getElementById()`获取到倒计时元素的引用，然后设置初始倒计时时间为5秒（变量`countdownTime`）。接着使用`setInterval()`创建一个间隔为1秒的定时器，每次定时器执行时，我们更新倒计时文本，然后将倒计时时间减1。当倒计时时间小于等于0时，我们清除定时器（使用`clearInterval()`）并通过`window.location.href`将页面跳转到指定的URL（此处为"http://www.example.com"）。


			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值