用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 相关文章推荐
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
javascript操作JSON的要领总结
Dec 09 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
AngularJS实现一次监听多个值发生的变化
Aug 31 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
使用Node搭建reactSSR服务端渲染架构
Aug 30 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 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 json_encode值中大括号与花括号区别
2013/09/30 PHP
JavaScript中的闭包原理分析
2010/03/08 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
js控住DOM实现发布微博效果
2016/08/30 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
vue数据双向绑定原理解析(get &amp; set)
2017/03/08 Javascript
vue axios整合使用全攻略
2018/05/24 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
python 判断自定义对象类型
2009/03/21 Python
python 正则式 概述及常用字符
2009/05/07 Python
python中stdout输出不缓存的设置方法
2014/05/29 Python
理解Python中的With语句
2016/03/18 Python
python简单操作excle的方法
2018/09/12 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python3实现逐字输出的方法
2019/01/23 Python
Python实现剪刀石头布小游戏(与电脑对战)
2019/12/31 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
python缩进长度是否统一
2020/08/02 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
《日月潭》教学反思
2014/02/28 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
营销与策划专业求职信
2014/06/20 职场文书
三十年同学聚会感言
2015/07/30 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
Ubuntu18.04下QT开发Android无法连接设备问题解决实现
2022/06/01 Java/Android