JavaScript进度条设计源码实例

最新推荐文章于 2025-06-25 14:52:27 发布

原创最新推荐文章于 2025-06-25 14:52:27 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #CSS #HTML #IE #Windows #ViewUI

法一：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 进度条 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="text/html">
<META NAME="Description" CONTENT="有关windows中进度条的实现">
<style type="text/css">
    #out{width:300px;height:20px;background:#EEE;}
    #in{width:10px; height:20px;background:#778899;color:white;text-align:center;}
    #font_color{background:yellow;text-align:center;color:white;}
</style>
</HEAD>
<BODY onload="start();" >
    <div id='out'>
        <div id="in" style="width:10%">10%</div>
    <div>
    <script type="text/javascript">
        i=0;
        function start()
        {
             ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数
        }
        function begin()
        {
         i+=1;
        if(i<=100)
        {
            document.getElementById("in").style.width=i+"%";
            document.getElementById("in").innerHTML=i+"%";}
        else
        {
            clearInterval(ba);
            document.getElementById("out").style.display="none";
            document.write("<span  style='background:yellow;text-align:center;color:white;'>加载成功</span>");
        }
        }
    </script>
</BODY>
</HTML>

法二：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 进度条 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="text/html">
<META NAME="Description" CONTENT="有关windows中进度条的实现">
<style type="text/css">
    #out{width:300px;height:20px;background:#ccc; position:relative}
    #in{width:10px; height:20px;background:#03f;color:white;text-align:center;overflow:hidden;}
    #in_0{text-align:center; width:300px; font-weight:bold; height:20px; line-height:20px; position:absolute; z-index:-1;}
    #in_1{text-align:center; width:300px; font-weight:bold; height:20px; line-height:20px; color:#fff;}
    #font_color{background:yellow;text-align:center;color:white;}
</style>
</HEAD>
<BODY onload="start();" >
    <div id='out'>
        <div id="in_0">已加载10%</div>
        <div id="in" style="width:10%"><div id="in_1"></div></div>
    <div>
    <script type="text/javascript">
        i=0;
        function start()
        {
             ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数
        }
        function begin()
        {
         i+=1;
        if(i<=100)
        {
            document.getElementById("in").style.width=i+"%";
            document.getElementById("in_0").innerHTML= document.getElementById("in_1").innerHTML="已加载"+i+"%";}
        else
        {
            clearInterval(ba);
            document.getElementById("out").style.display="none";
            document.write("<span  style='background:yellow;text-align:center;color:white;'>加载成功</span>");
        }
        }
    </script>
</BODY>
</HTML>

法三（FF下调试未通过，可能不兼容IE外浏览器）：

<html>
 <head>
 <style>
#load{width:500px;height:25px;border:1px #000 solid;}
#loading{position:absolute;z-index:2;height:23;filter:progid:DXImageTransform.microsoft.gradient(gradienttype=1,startColorStr=white,endColorStr=#39867b);}
#loadtext{position:absolute;z-index:3;width:100%;height:100%;line-height:23px;text-align:center;}
</style>
 <script>
var i=0;
function test(){
    i++;
    document.getElementById("loading").style.width = i + "%";
    document.getElementById("loadtext").innerText = i + "%";
    if(i<100)setTimeout("test()",200);
}
setTimeout("test()",200);
</script>
</head>
 <body>
  
<div id="load"><div id="loading"></div><div id="loadtext">1%</div></div>
  
 </body>
</html>