2、面试题：5s后页面将跳转，点击按钮留在此页

最新推荐文章于 2021-05-30 20:10:37 发布

avoidaily

最新推荐文章于 2021-05-30 20:10:37 发布

阅读量312

点赞数

分类专栏：前端面试题

本文链接：https://blog.csdn.net/qq_43459224/article/details/90106204

版权

前端面试题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>5s后页面将跳转，点击按钮留在此页</title>
	</head>
	<body>
        <p>5s后页面将跳转</p>
        <button>留在此页</button>
    </body>
    <script>

     (function(){
         //获取pbq
         var p=document.getElementsByTagName("p")[0];
         //获取button
         var btn=document.getElementsByTagName("button")[0];
         //创建一个周期性定时器，用于倒计时
         var time=setInterval(function(){
             //获取p标签的第一个字符内容
            var scd=p.innerHTML.slice(0,1); // 5
            //截取p标签剩余内容
            var other=p.innerHTML.slice(1);//s后页面将跳转
             每隔1s，倒计时-1
             scd-=1;
             //将每次-1的新值，重新写入p.innerHTML中
             p.innerHTML=`${scd}${other}`;
             //当倒计时=0结束，清除倒计时定时器,跳转/关闭页面
             if(scd==0){
                 clearInterval(time);
                 location.href="http://www.tmooc.cn/";//跳转页面
                 //window.close();//或者关闭页面
             }
         },1000);
    
     //给按钮绑定一个事件，点击按钮时，清除倒计时定时器
     btn.onclick=function(){
         clearInterval(time);
     }
       })()
    </script>
</html>

avoidaily

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2、面试题：5s后页面将跳转，点击按钮留在此页

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>5s后页面将跳转，点击按钮留在此页</title> </head> <body> <p>5s后页面将跳转</p> ...
复制链接

扫一扫