用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 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
jquery及原生js获取select下拉框选中的值示例
Oct 25 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
js解决movebox移动问题
Mar 29 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
jquery过滤特殊字符',防sql注入的实现方法
Aug 17 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
JavaScript console的使用方法实例分析
Apr 28 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
thinkphp实现数组分页示例
2014/04/13 PHP
php检测文本的编码
2015/07/26 PHP
php扩展开发入门demo示例
2019/09/23 PHP
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
2016/11/01 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
JS常用排序方法实例代码解析
2020/03/03 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
Python OS模块常用函数说明
2015/05/23 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
jupyter notebook 多行输出实例
2020/04/09 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
宿舍使用违章电器检讨书
2014/01/12 职场文书
小学生获奖感言范文
2014/02/02 职场文书
服装设计师求职信
2014/06/04 职场文书
教书育人演讲稿
2014/09/11 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS