倒计时一定时间跳转到另一个页面

最新推荐文章于 2022-01-12 15:03:15 发布
最新推荐文章于 2022-01-12 15:03:15 发布
阅读量2.5k 收藏
点赞数
分类专栏： 前端js

倒计时效果应用非常的频繁，也比较简单，本章节主要针对javascript初学者的。

下面就给出一个简单的代码实例，供初学者参考，希望能够有所帮助。

代码实例如下:

 
 

  
  

   
   

    
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 
        

          20 
        
 
        

          21 
        
 
        

          22 
        
 
        

          23 
        
 
        

          24 
        
 
        

          25 
        
 
        

          26 
        
 
        
 
         
 
          <!DOCTYPE html> 
         
 
         
 
          < 
          html 
          > 
         
 
         
 
          < 
          head 
          > 
         
 
         
 
          < 
          meta  
          charset 
          = 
          "utf-8"  
          />  
         
 
         
 
          < 
          title 
          >网页倒计时效果代码</ 
          title 
          >  
         
 
         
 
          < 
          script  
          type 
          = 
          "text/javascript" 
          > 
         
 
         
 
          window.onload=function(){ 
         
 
         
 
             
          var myspan=document.getElementById("myspan"); 
         
 
         
 
             
          var timer=30; 
         
 
         
 
             
          var flag; 
         
 
         
 
             
          function daoji(){ 
         
 
         
 
                
          timer=timer-1; 
         
 
         
 
                
          myspan.innerHTML=timer; 
         
 
         
 
                
          if(timer==0){ 
         
 
         
 
                  
          location.href="http://www.softwhy.com"; 
         
 
         
 
                  
          clearInterval(flag); 
         
 
         
 
                
          } 
         
 
         
 
             
          } 
         
 
         
 
             
          flag=setInterval(daoji,1000); 
         
 
         
 
          } 
         
 
         
 
          </ 
          script 
          >  
         
 
         
 
          </ 
          head 
          >  
         
 
         
 
          < 
          body 
          >  
         
 
         
 
          < 
          div 
          >页面跳转倒计时:< 
          span  
          id 
          = 
          "myspan" 
          ></ 
          span 
          ></ 
          div 
          > 
         
 
         
 
          </ 
          body 
          >  
         
 
         
 
          </ 
          html 
          >

以上代码实现了我们需要的效果，当倒计时完成后，就会跳转到其他页面。

Return_KB
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Html多个页面之间相互定时跳转
weixin_42636075的博客
01-29 1871
Httml多个页面之间相互定时跳转
Android实现倒计时结束后跳转页面功能
08-28
在Android应用开发中，有时需要实现倒计时功能，并在倒计时结束时执行特定操作，比如跳转到另一个页面。本篇文章将详细介绍如何在Android中实现这一功能。 首先，我们要理解Android应用中的倒计时通常通过`Handler`...
倒计时十秒后跳转到其它页面源代码
03-31
NULL 博文链接：https://826219395-qq-com.iteye.com/blog/1374703
Handler和Timer实现倒计时跳转页面
weixin_38304512的博客
06-19 453
我们在app的导航页应用到倒计时3秒进入主页，并且是第一次进入的时候显示该导航页，第二次进入的时候直接进入主页    此处我们可以使用handler+sharedpreferences 或者timer+sharedpreferences实现效果   话不多说，直接上代码       首先，我们简单的写两个activity的布局，用于跳转 简单的写一个textview用于显示倒计时
JavaScript实现倒计时跳转到指定页面代码
爱酷码的博客
12-29 680
时间显示动态倒计时，0的时候自动跳转到指定页面代码如下 <body> <p>倒计时<span>5</span>秒跳转到主页面...</p> </body> <script> var i=5; setInterval(function () { var a=document.querySelector("span"); i--; .
JS设置定时器跳转页面
li22356的博客
01-12 1344
JS 停留几秒钟后跳转网页 function submitCase() { setTimeout(function(){//1秒后跳转 location.href = "${pageContext.request.contextPath}/跳转路径";//PC网页式跳转 },1000); }
Javascript倒计时页面跳转实例小结
10-26
总结来说，JavaScript实现倒计时页面跳转的核心在于利用`setInterval`或`setTimeout`设置定时任务，结合日期对象（`Date`）计算剩余时间，并在时间到点时执行跳转。通过巧妙地设计逻辑，可以实现各种各样的倒计时...
各种页面定时跳转（倒计时跳转）代码合集
12-30
在网页设计中，有时我们需要实现一个功能，即在用户访问某个页面后，经过一定时间自动跳转到另一个页面。这种技术通常被称为“页面定时跳转”或“倒计时跳转”。这种效果常用于广告页面、限时优惠活动、登录过期提示...
JavaScript实现倒计时跳转页面功能【实用】
10-20
在本文中，我们将探讨如何使用JavaScript实现一个倒计时跳转页面的功能，这在许多网页应用中非常常见，比如表单提交后的确认页面。 首先，我们需要在HTML页面中设置一个用于显示倒计时的元素，通常是`<span>`或`...
Android利用CountDownTimer实现倒计时功能 Android实现停留5s跳转到登录页面
08-29
Android平台中的倒计时功能是指在一定时间内执行特定操作的功能，例如在应用程序启动时实现倒计时并跳转到登录页面。Android 提供了多种方法来实现倒计时功能，其中之一就是使用 CountDownTimer 组件。 ...
倒计时跳转页面
01-10
完成某个操作后，页面会出现倒计时多长时间跳转到另一个页面
HTML 5秒倒计时跳转指定网站源码.zip
06-28
HTML 5秒倒计时跳转指定网站源码,适合用来做网站的404网页，界面简约大气，自己也可以修改倒计时，真的很好
HTML设置倒计时结束后跳转到另一个页面
COCO56的博客
07-07 4581
效果 效果很low，不过功能都实现了。 核心代码 <div id="countdown"></div> <script language="javascript" type="text/javascript"> var time = 12 var contain = document.getElementById("countdown") ...
前端html小技巧—网页定时跳转代码分享
yunduanaoligei的博客
01-11 1501
今天分享下”前端html小技巧—网页定时跳转代码分享“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 在实践中，我们经常遇到一个问题，那就是页面N秒后如何自动跳转？ 当我遇到问题并搜索信息时，我总结了三种方法 方法1： 最简单的一种：直接在前面<head>里面添加代码： 复制代码代码如下: <span style="font-size:18px;"> </span><span
页面倒计时一定时间，实现跳转到另一页面
sunshine_hl的博客
01-12 1060
页面倒计时一定时间，实现跳转到另一页面
PHP+HTML实现登出界面倒计时效果
weixin_34096182的博客
02-21 297
在WAMP(Windows+Apache+MySQL+PHP)做网站时，通常需要使用Session记录表单登陆用户名和密码等变量，而在登出时需要清除Session。通常我想实现的登出是通过alert提示用户然后header跳转，但下面的代码是通过JavaScript实现的时间倒计时并跳转到主页的效果，主要是看到学校的BT网站等都是这个效...
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
HTML 定时页面跳转
弹指间的时光的博客
10-11 4789
有 2 种方法可以实现 html 的定时页面跳转，1、meta refresh 实现。2、JavaScript 实现。原文传送门 1、通过 meta refresh 实现 3 秒后自动跳转到 http://www.cssue.com/ 页面。 [html] view plain copy html>   head>   meta
uniapp 怎么设置倒计时自动跳转下一个页面
最新发布
05-31
3. 在vue组件中，可以在mounted生命周期方法中启动倒计时，并在倒计时结束时跳转到下一个页面。例如： ``` <span>{{ countDown }} export default { data() { return { countDown: 10 // 倒计时剩余...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值