HTML设置倒计时结束后跳转到另一个页面

最新推荐文章于 2022-04-29 23:47:16 发布

COCO56（徐可可）

最新推荐文章于 2022-04-29 23:47:16 发布

阅读量4.7k

点赞数 3

分类专栏： HTML

本文为博主原创文章，未经博主允许不得转载。访问本人博客可以百度COCO56，获取更多资讯。有事儿请内信或者在文章下方评论

本文链接：https://blog.csdn.net/COCO56/article/details/94918881

版权

HTML 专栏收录该内容

4 篇文章

订阅专栏

效果

效果很low，不过功能都实现了，会自动倒计时秒数。
在这里插入图片描述

核心代码

<h2><div id="countdown"></div></h2>

<script language="javascript" type="text/javascript">
    var time = 12
    var contain = document.getElementById("countdown")
    contain.innerHTML = time.toString() + "秒钟后系统自动跳转到关于我。"
    function updateTime(){
        time = time-1
        if(time>=0){ contain.innerHTML = time.toString() + "秒钟后系统自动跳转到关于我。" }
        else{ contain.innerHTML = "正在跳转到关于我，请稍后。。。" }
    }
    setInterval("updateTime()",1000);
    setTimeout("javascript:location.href='https://coco5666.github.io/blog/about'", time*1000);
</script>

整个网页的代码

<!DOCTYPE html>
<html>

<head>
<!-- 设置内容的编码格式 -->
<meta charset="utf-8"/>
<!-- 设置查询关键字 -->
<meta name="keywords" content="Coco56的个人主页"/>
<!-- 设置网页的描述信息 -->
<meta name="distribution" content="Coco5666.github.io"/>
<!-- 设置作者 -->
<meta name="author" content="Coco56"/>
<link rel="icon" href="title.ico" type="image/icon"/>
<title>Coco56 GitHub个人主页 | 首页</title>
</head>

<body>
<audio src = "https://coco5666.github.io/bg.mp3" controls autoplay loop = "loop">该浏览器不支持此功能</audio>
<br>
<h1>本页地址： <a href="https://coco5666.github.io/" target="_blank" title="">https://coco5666.github.io/</a></h1>
<!-- 绘制一根线 -->
<hr width="100%" align = "left" />
<h1>关于我：<a href="https://coco5666.github.io/blog/about" target="_blank" title="">https://coco5666.github.io/blog/about</a></h1>

<h2><div id="countdown"></div></h2>

<script language="javascript" type="text/javascript">
    var time = 12
    var contain = document.getElementById("countdown")
    contain.innerHTML = time.toString() + "秒钟后系统自动跳转到关于我。"
    function updateTime(){
        time = time-1
        if(time>=0){ contain.innerHTML = time.toString() + "秒钟后系统自动跳转到关于我。" }
        else{ contain.innerHTML = "正在跳转到关于我，请稍后。。。" }
    }
    setInterval("updateTime()",1000);
    setTimeout("javascript:location.href='https://coco5666.github.io/blog/about'", time*1000);
</script>

<hr width="100%" align = "left" />
<h1>GitHub博客页： <a href="https://coco5666.github.io/blog" target="_blank" title="">https://coco5666.github.io/blog</a></h1>
<!-- 绘制一根线 -->
<hr width="100%" align = "left" />
<h1>2019新年祝福：<a href="happyNewYear/play.html" target="_blank" title="">https://coco5666.github.io/happyNewYear/play.html</a></h1>
<!-- 绘制一根线 -->
<hr width="100%" align = "left" />
<br>
<h2>B站直播主页：<a href="http://live.bilibili.com/12743964" target="_blank" title="">http://live.bilibili.com/12743964</a></h2>
<br>
注：推荐使用电脑访问，手机访问可能屏幕太小，看不清屏幕上的代码。
<br>
<br>
2019年01月01日晚7点准备直播讲解打飞机：
<br>
资源下载：
<br>
类之间的互动关系图：<a href="打飞机类之间的互动关系.png" download="打飞机类之间的互动关系.png">点击下载</a>
<br>
游戏声音引擎补丁代码：<a href="musicDependence.rar" download="musicDependence.rar">点击下载</a>
<hr width="100%" align = "left" />
<br>
<div>
    <hr width="100%" align = "left" />
    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    本站总访问量 <span id="busuanzi_value_site_pv"></span> 次
    &nbsp;&nbsp;&nbsp;&nbsp;
    本站访客数<span id="busuanzi_value_site_uv"></span>人次
    <hr width="100%" align = "left" />
    <hr width="100%" align = "left" />
    <hr width="100%" align = "left" />
    <br>
    <br>
    <br>
</div>

</body>
</html>