封装【定时跳转 + onfucs + onblur 】功能，遇到的问题

本帖最后由 ofdata 于 2013-07-24 21:27:29 编辑

解决方案 »

  1.   


    <html>
    <head>
        <title>定时跳转测试</title>
        <script type="text/javascript">
        
         function $(id){return document.getElementById(id)}
           
            // url：跳转地址
            // time：等待时间
            // isShowText：是否显示提示信息
          var tir=0,tipDiv,startTir; 
    function goToPage(url,time,isShowText){
                if(!tipDiv){
                  tipDiv = document.createElement('div');
                  document.body.appendChild(tipDiv);
                }
                clearInterval(tir);
        if(time<0) return ;
                tir=setInterval(function(){
                if(time--==0){ // 0不进行跳转
                  clearInterval(tir);
                  window.location = url;
                  alert('gotoPage');
                }else{
                 tipDiv.innerHTML = 'coming soon:' + time + 's.';
                }
                },1000);
            }
     
        </script>
    </head>
    <body>
        <a id="iteye" href="http://www.iteye.com"> ITEYE </a>
        <br/>
        <a id="csdn" href="http://www.csdn.net"> CSDN </a>
        <script type="text/javascript">
            $("iteye").onfocus = function() {
                goToPage("http://www.baidu.com",10,true);
            };
            $("iteye").onblur = function() {
                goToPage("http://www.baidu.com",-1);
            }
        </script>
    </body>
    </html>
      

  2.   

    因为是想封装所以不想用全局变量。谢谢。我刚刚又写了一份，请指点一下，再谢！<html>
    <head>
    <title>定时跳转测试</title>
    <script type="text/javascript">
    // url：跳转地址
    // time：等待时间
    // isShowText：是否显示提示信息
    var pageUtil = {
    c_go:function(){},
    c_show:function(){},
    go : function (url,time,isShowText){
    if (time < 0) { // 小于0不进行跳转
    console.log('time=' + time + ',do nothing...');
    return;
    }
    var actions = {
    go2:function(){
    window.location = url;
    },
    show: function() {
    if(time >= 0) {
    console.log(time);
    document.getElementById('s').innerHTML = 'coming soon:' + time + 's.';
    pageUtil.c_show = setTimeout(actions.show,1000);
    time--;
    } else {
    actions.go2();
    }
    }
    };
    if (isShowText) {
    var div = document.createElement('div');
    document.body.appendChild(div);
    div.id = 's';
    actions.show();
    } else {
    pageUtil.c_go = setTimeout(actions.go2,time * 1000);
    }
    },
    'clear':function() {
    clearTimeout(pageUtil.c_go);
    clearTimeout(pageUtil.c_show);
    }
    }
    </script>
    </head>
    <body>
    <a id="iteye" href="http://www.iteye.com"> ITEYE </a><br/>
    <a id="csdn" href="http://www.csdn.net"> CSDN </a>
    <script type="text/javascript">
    document.getElementById("iteye").onfocus = function() {pageUtil.go("http://www.baidu.com",10,true);};
    document.getElementById("iteye").onblur = function() {pageUtil.clear();}
    </script>
    </body>
    </html>
      

  3.   

     最好用setInterval，会比setTimeout效率高些，代码也简单些
    var div = document.createElement('div');,你最好判断一下建了没，防重建
    -----------------
    如果不要全局变量，只要在外套一个function (function(){
          var tir=0,tipDiv,startTir; 
     
          
    window.goToPage=function (url,time){
                if(!tipDiv){
                  tipDiv = document.createElement('div');
                  document.body.appendChild(tipDiv);
                }
                clearInterval(tir);
    if(time<0) return ;
                tir=setInterval(function(){
                if(time--==0){ //  0不进行跳转
                  clearInterval(tir);
                  window.location = url;
                  alert('gotoPage');
                }else{
                 tipDiv.innerHTML = 'coming soon:' + time + 's.';
                }
                },1000);
            }
         goToPage.clear=function(){ clearInterval(tir) } //停止
            
      })()