js弄出加载效果，加载完后跳转到指定的页面

最新推荐文章于 2025-05-28 12:36:17 发布

原创最新推荐文章于 2025-05-28 12:36:17 发布 · 8.9k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #代码

CSS 同时被 2 个专栏收录

15 篇文章

订阅专栏

JS+JQ

8 篇文章

订阅专栏

本文展示了如何利用JavaScript创建加载效果，并在加载完毕后自动跳转到指定页面。通过HTML设置加载动画，结合JavaScript控制加载状态，一旦加载完成，页面将无缝转向新页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

这里写图片描述

html代码

<form name=loading>
<td align=center>
<p><font color=gray>正在载入首页，请稍候.......</font></p>
<input type=text name=chart size=46 style="font-family:Arial;
font-weight:bolder; color:gray;
background-color:white; padding:0px; border-style:none;">
<br>
<input type=text name=percent size=46 style="font-family:Arial;
color:gray; text-align:center;
border-width:medium; border-style:none;">
</td>
</form>

js代码

<script>
    var bar=0;
    var line="||";
    var amount="||";
    count();
    function count(){
        bar=bar+2;
        amount=amount+line;
        document.loading.chart.value=amount;
        document.loading.percent.value=bar+"%";
        if (bar<99) 
        {
            setTimeout("count()", 100);
        }
        else{
            window.location="http://www.baidu.com/";
        }
    }
</script>