用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 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
js中unicode转码方法详解
Oct 09 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
JS中关于正则的巧妙操作
Aug 31 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php实现插入排序
2015/03/29 PHP
PHP常用文件操作函数和简单实例分析
2016/06/03 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
关于document.cookie的使用javascript
2008/04/11 Javascript
Javascript 遍历对象中的子对象
2009/07/03 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
详解webpack自定义loader初探
2018/08/29 Javascript
详解JSON.stringify()的5个秘密特性
2020/05/26 Javascript
[03:18]【TI9纪实】社区大触GL与木木
2019/08/25 DOTA
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
python实现一个猜拳游戏
2020/04/05 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
你应该知道的30个css选择器
2014/03/19 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
后勤部长岗位职责
2013/12/14 职场文书
安全生产检讨书
2014/01/21 职场文书
秘书英文求职信范文
2014/01/31 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
异地年检委托书范本
2014/09/24 职场文书
幽灵公主观后感
2015/06/09 职场文书
校园广播稿范文
2015/08/19 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL