用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 相关文章推荐
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
js获取json元素数量的方法
Jan 27 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
JavaScript数据类型学习笔记
Jan 25 Javascript
三分钟带你玩转jQuery.noConflict()
Feb 15 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
jQuery仿写百度百科的目录树
Jan 03 Javascript
vue.js的安装方法
May 12 Javascript
vue组件编写之todolist组件实例详解
Jan 22 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
zend framework配置操作数据库实例分析
2012/12/06 PHP
php中session使用示例
2014/03/29 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
老生常谈 关于JavaScript的类的继承
2016/06/24 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python之str操作方法(详解)
2017/06/19 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python分布式计算dispy的使用详解
2019/12/22 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
eBay美国官网:eBay.com
2020/10/24 全球购物
机械工程师的岗位职责
2013/11/17 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
校园摄影活动策划方案
2014/02/05 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
教师党员个人整改措施
2014/10/27 职场文书
幸福来敲门观后感
2015/06/04 职场文书