zoukankan      html  css  js  c++  java
  • js小程序实现页面自动跳转

    1.实现的效果如图所示:

      效果图

    2.程序代码(两种计时器分别实现)

     1) setTimeout(" ",  )

    <!DOCTYPE html>
    <html>
     <head>
      <title>浏览器对象</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
     </head>
     <body>
       <h2>操作成功</h2>
       <p><span id="time">5</span>秒后回到主页<a href="" onclick="window.history.back();">返回</a></p>
     
      <script type="text/javascript">  
       var second=5;
       //获取显示秒数的元素,通过定时器来更改秒数。
        function show(){
             second=second-1;
           if(second>0) {
               document.getElementById("time").innerHTML=second;
               var k=setTimeout("show()",1000);
           }
           else {
                clearTimeout(k);
               location.href="http://www.imooc.com/";
           }
        }
       setTimeout("show()",0);   
       //通过window的location和history对象来控制网页的跳转。
    
     </script> 
    </body>
    </html>

       2) setInterval(" ", )   

    tml>
     <head>
      <title>浏览器对象</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
     </head>
     <body>
       <h2>操作成功</h2>
       <p><span id="time">5</span>秒后回到主页<a href="" onclick="window.history.back();">返回</a></p>
     
      <script type="text/javascript">  
       var second=5;
       //获取显示秒数的元素,通过定时器来更改秒数。
        function show(){
             second=second-1;
           if(second>0) {
               document.getElementById("time").innerHTML=second; 
           }
           else {
               location.href="http://www.imooc.com/";
           } 
        }
        
        setInterval("show()",1000);
     
       //通过window的location和history对象来控制网页的跳转。
          
     </script> 
    </body>
    </html>
  • 相关阅读:
    js-高级06-正则
    js-高级05-javaScript处理机制
    js-高级04-函数高级应用
    js-高级03-面向对象的继承
    js-高级02-贪吃蛇案例分析
    js-高级01面向对象及创建对象
    js-API 06 高级动画二
    js-API 05 高级动画
    对象数组 数组对象 增删改查 数组
    jQuery ajax请求 一般请求和自定义请求
  • 原文地址:https://www.cnblogs.com/summer323/p/4724382.html
Copyright © 2011-2022 走看看