用CSS+JS实现的进度条效果效果


Posted in Javascript onJune 05, 2007

进度条,就是在用户进入你的网站的时候,能让用户看到网页下载了多少,这个的作用非常明显---就是让用户的等待时间变长,可以有效的弥补空间慢的缺点(当然,你空间太慢,还是建议你换下空间,呵呵)
好了,现在我先来举两个例子
一个是用FLASH实现的 (这个网上很多网站都是,不说了)
一个是用动态的GIF实现的 (这个你可以看微软官方的下载页面,也不说了)
这里,我们的重点是用 CSS+JS 实现这个效果
好了,废话不多说,我们开始
首先,写一段HTML代码
<div id="loading"> 
 <strong id="loadcss"> 33%</strong>
</div>
好了,现在我们编写一下CSS代码
#loading {

                    width: 300px;

                    background-color: #000;

                      border : 2px solid #000;

                }

这个是我们希望进度条的底色是 #000 ,黑色的,再加了一个边框

j
接下来多 loadcss 进行设计

#loadcss {

                  display : block ; /*很重要, 弄成块*/

                  background-color: # 0df;

                  text-align : center;

                }

注意,这里的BLOCK 很重要的, 我们用 #0df 这种颜色来作为进度条的颜色;

好了,预览一下

h
呵呵,不过现在是整条进度条都是满的

那么,怎么弄可以显示进度呢?

这里,可以用一个巧妙的方法

把HTML代码稍微修改一下

看下面的代码:

<div id="loading">

        <strong id="loadcss" style="width:33%;"> 33%</strong>

</div>

呵呵,怎么样,现在 显示的就是33% 了

但是,他是不动,对吧? 好,下面我们就用 JS 来实现 一下 (这个JS不是我设计的...)

<script language="JavaScript">

i=0;

function load () {

                            showload=setInterval("load()",500);

                          }

function setload(){

                i+=5;

              if (i>=100) {

                                  clearInterval(showlaod);

                                }

                document.getElementById("loadcss").style.width=i+"%" ;

                document.getElementById("loadcss").innerHTML=i+"%";

              }

</script>

OK了,这段JS主要是两个函数, 一个是 load ,用来开启进度条,

                                          第二是 setload ,用来 控制进度条 的位置 ,在 setload设置一个计数器,每0.5秒运行一次steload.

O K了,这段JS要放在HEAD里面,然后在BODY中调用 , 即 <BODY ONLOAD="LOAD;">

呵呵,现在运行一下网页试试,呵呵,是不是成功了,呵呵.

Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 Javascript
Jquery取得iframe下内容的方法
Nov 18 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
JS实现星星评分功能实例代码(两种方法)
Jun 09 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
js实现DIV的一些简单控制
Jun 04 #Javascript
用js实现键盘方向键翻页功能的代码
Jun 03 #Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 #Javascript
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 #Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
Jun 02 #Javascript
把JS与CSS写在同一个文件里的书写方法
Jun 02 #Javascript
JavaScript 不只是脚本
May 30 #Javascript
You might like
PHP输出XML到页面的3种方法详解
2013/06/06 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
理解javascript中Map代替循环
2016/02/26 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
js实现图片实时时钟
2020/01/15 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
师范毕业生求职自荐信
2013/09/25 职场文书
高校毕业生登记表自我鉴定
2013/11/03 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
基督教婚礼主持词
2014/03/14 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书
服装发布会策划方案
2014/05/22 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
大学生村官个人总结
2015/02/15 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
导游词之西递宏村
2019/12/10 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android
JS开发前端团队展示控制器来为成员引流
2022/08/14 Javascript