`
liss
  • 浏览: 842815 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JavaScript进度条源码实例

JavaScriptCSSHTMLIEWindows 
阅读更多

1.如图:

 

 

 


 

<!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>

 

2.

<!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>



 


 


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




<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>
<div id="load"><div id="loading"></div><div id="loadtext">1%</div></div>
<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>





 


http://hi.baidu.com/sdhzczj/blog/item/6b3eb5e70a85712bb8382048.html


  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      javascript实验的网页加载进度条
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
    
        
        
    
          
    
            
            
    
              
                
                
                
    
                  
    
                    
                      新 ASP无组件上传带进度条 （源码 + 实例）
                    
                  
    
                  
    通过分析和学习这个源码实例，开发者可以掌握如何在ASP环境中实现文件上传和进度显示，这对于构建交互性更强的Web应用非常有帮助。同时，也可以根据自己的需求对其进行扩展和优化，比如增加多文件上传功能，或者优化...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      HTML5 CSS3  进度条实现实例源码完美版
                    
                  
    
                  
    在这个“HTML5 CSS3 进度条实现实例源码完美版”中，我们可以深入学习如何利用这两种技术来实现动态、美观的进度条效果。  HTML5引入了许多新元素和API，其中之一就是`&lt;progress&gt;`元素，用于表示一个任务的进度。这...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      ASP无组件上传带进度条（源码+实例）
                    
                  
    
                  
    总的来说，这个"ASP无组件上传带进度条"的源码和实例为开发者提供了一个在ASP环境中实现文件上传和进度显示的参考，对于那些需要在ASP平台上处理大文件上传的开发者来说，是非常有价值的资源。通过学习和实践，你...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      Java 文件上传带进度条源码
                    
                  
    
                  
    总之，"Java 文件上传带进度条源码"是一个结合了Java Web开发、多线程、异步处理和前端交互的实例，对于理解和实践Java文件上传功能具有很高的参考价值。通过学习这个示例，开发者可以更好地掌握如何在实际项目中...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      可自定义进度条颜色的CSS3动画进度条源码.zip
                    
                  
    
                  
    这个“可自定义进度条颜色的CSS3动画进度条源码”提供了一种利用CSS3实现动态且色彩可定制的进度条的方法。下面我们将详细探讨这个源码中的关键知识点。  首先，CSS3是层叠样式表（Cascading Style Sheets）的第三个...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      进度条加载原代码实现显示时间
                    
                  
    
                  
    本文将深入探讨如何使用JavaScript来实现进度条加载，并且重点介绍两种能够显示时间进度的方法。  首先，我们要理解进度条的基本构成。一个简单的进度条通常包括一个容器元素（如div）和一个填充元素（如span），...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      HTML5 CSS3 ： 进度条的实现实例源码
                    
                  
    
                  
    在本实例中，我们将深入探讨如何使用HTML5和CSS3来实现一个具有视觉吸引力的进度条。进度条在网页中广泛应用，如文件上传、加载过程、任务进度指示等，能有效地向用户反馈操作状态。  首先，HTML5引入了一个新的元素...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      基于CSS3实现五彩闪烁跳跃进度条源码.zip
                    
                  
    
                  
    【标题】"基于CSS3实现五彩闪烁跳跃进度条源码.zip" 提供的是一个使用CSS3技术构建的动态进度条示例。这个进度条的特点是具有五彩闪烁和跳跃的效果，为用户界面增添了生动性和视觉吸引力。在前端开发中，这种效果常...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      进度条的实现实例CSS源码.rar
                    
                  
    
                  
    本文将深入探讨如何使用CSS（层叠样式表）来实现进度条的实例，并分析提供的源码。  首先，我们需要理解进度条的基本结构。一个简单的进度条通常由两部分组成：一个容器（通常是div元素）和一个填充的进度部分（也...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      php进度条代码实例(CProgBar Example).rar
                    
                  
    
                  
    1. **前端HTML和JavaScript**：这部分代码负责创建进度条的HTML结构，并使用JavaScript监听用户触发的事件，如文件上传按钮点击。当事件发生时，JavaScript通过AJAX发送请求到PHP脚本。  2. **后端PHP**：PHP脚本...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      php进度条代码实例(CProgBar Example).7z
                    
                  
    
                  
    4. **前端展示**：接收到服务器的响应后，JavaScript可以更新页面上的进度条元素，以反映新的进度。  5. **结束处理**：当任务完成后，服务器会通知客户端任务结束，可能还会返回最终结果或其他相关信息。  在`...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      echarts多条进度条实现源码.zip
                    
                  
    
                  
    然后，在JavaScript中初始化ECharts实例，并设置相应的配置项。对于多条进度条，我们可以创建多个series，每个series代表一条进度条。以下是一个基本示例，展示了如何创建两条进度条：  ```javascript var option = ...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      JSP源码,图片上传,进度条,JSP图片上传实例
                    
                  
    
                  
    在这个“JSP源码,图片上传,进度条,JSP图片上传实例”的主题中，我们将深入探讨如何使用JSP进行图片上传，并结合进度条展示上传进度。  首先，图片上传功能是网站或应用程序中常见的一种交互需求。用户可以通过这种...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      6个非常经典Web前端使用的炫丽进度条（二）
                    
                  
    
                  
    综上所述，这个炫丽的进度条实例展示了前端开发中的多种技术融合，包括HTML、CSS、JavaScript（尤其是jQuery）以及现代Web设计原则。通过学习和理解这些技术，开发者可以创建出更加生动、吸引人的Web应用。
    
                
    
                
              
                
                
                
    
                  
    
                    
                      java 进度条上传 源码
                    
                  
    
                  
    在描述中提到，此源码实例是基于JSP和SWFUpload库来实现这一功能的，同时支持多文件上传。  首先，JSP（JavaServer Pages）是Java平台上的动态网页技术，它允许开发者将Java代码嵌入到HTML页面中，以便在服务器端...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      《程序天下：JavaScript实例自学手册》光盘源码
                    
                  
    
                  
    1.21 用JavaScript随机修改页面的标题 1.22 判断网页加载完毕 1.23 嵌入网页的播放器 1.24 设置指定网页为主页 1.25 使用JavaScript传递页面参数 1.26 页面被冻结 第 2章 按钮特效 2.1 页面刷新按钮 2.2 按回车调用...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      600个javascript经典实例（内含源码）
                    
                  
    
                  
    很实用的实例：
按钮事件 标记 表单事件 表格特效 菜单 超链接 窗口事件 多功能特效 进度条特效 时间日期 鼠标特效 数组 图像特效 文件传输 文字特效 下拉框 验证事件 页面事件 页面效果 在线测试 状态栏····...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      ASPNET批量上传控件 显示进度条
                    
                  
    
                  
    这个资源集合，"ASPNET批量上传控件 显示进度条"，提供了实现这一功能的方法，包括了C#编程语言、ASP.NET框架、SQL数据库交互以及源码分析等关键知识点。  批量上传控件通常是一个自定义的Web控件，它允许用户选择多...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      CSS3+JS实现iOS8风格loading加载进度条特效源码.zip
                    
                  
    
                  
    总之，这个压缩包提供了一个结合CSS3和JavaScript实现的iOS8风格加载进度条实例，对于学习和应用Web前端技术，特别是动态效果的实现，是一个很好的实践案例。开发者可以通过研究这个源码来提升自己在网页动态效果...
    
                
    
                
              
                
                
                
    
                  
    
                    
                      uploadfy插件.net源码实例
                    
                  
    
                  
    此插件的.net源码实例是一个非常实用的学习资源，可以帮助开发者深入理解UploadFY的工作原理和使用方法，从而在自己的项目中灵活运用。  UploadFY的核心特性包括：  1. **多文件上传**：用户可以一次性选择并上传多...
    
                
    
                
              
            
    
          
    
        
    
    

  





  
    Magicbox
  













      

      
        

          

            

              

                

                
              

            

            


            

          

        

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics