Js 5秒后页面自动跳转

思路：

设置定时，间隔1s秒数-1，秒数到1后跳转

重点：

1.自减：--i

2.元素内容赋值：.innerHTML =    //直接输出

3.定时：setTimeout(code ，ms)  //执行一次

4.跳转：location.href = ' '

解析：

构造一个函数，传递参数秒数和链接，秒数赋值到目标元素上，判断秒数自减后，是否等于零，是则执行跳转。否则使用setTimeout方法，传入间隔时间比如1000，传入执行函数，即之前的构造函数。这样一个间隔1s让秒数自减，判断是否跳转的循环就完成了。

代码：

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>5s跳转</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<span id="jumpTo">5</span>秒后自动跳转到www.baidu.com
<script type="text/javascript">
    funJump(5,'https://www.baidu.com/');
    function funJump(secs,surl){
        var jumpTo=document.getElementById('jumpTo');
        jumpTo.innerHTML=secs;
        if(--secs>0){
            setTimeout(function(){ funJump(secs,surl)},1000);
            // setTimeout("funJump("+secs+",'"+surl+"')",1000);   

        }else{
            location.href=surl;
        }

    }
</script>  
</body>

 

posted @ 2020-08-13 10:02  以深  阅读(4427)  评论(0)    收藏  举报
TOP