用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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
Sep 01 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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 win下Socket方式发邮件类
2009/08/21 PHP
php连接数据库代码应用分析
2011/05/29 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
php判断表是否存在的方法
2015/06/18 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
自己的js工具_Form 封装
2009/08/21 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
python杀死一个线程的方法
2015/09/06 Python
python常见的格式化输出小结
2016/12/15 Python
Python OpenCV获取视频的方法
2018/02/28 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python3监控疫情的完整代码
2020/02/20 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
python热力图实现简单方法
2021/01/29 Python
夜大毕业生自我评价分享
2013/11/10 职场文书
创先争优承诺书范文
2014/03/31 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书