用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 相关文章推荐
js取滚动条的尺寸的函数代码
Nov 30 Javascript
javascript五图轮播切换实用版
Aug 17 Javascript
关于javascript event flow 的一个bug详解
Sep 17 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
Jul 28 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
vue toggle做一个点击切换class(实例讲解)
Mar 13 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 Javascript
JS实现炫酷雪花飘落效果
Aug 19 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使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
2014/07/04 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
2014/09/10 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
React组件中的this的具体使用
2018/02/28 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
Vue如何实现响应式系统
2018/07/11 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
微信小程序修改数组长度的问题的解决
2019/12/17 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
Python3.x和Python2.x的区别介绍
2013/02/12 Python
深入理解Python 代码优化详解
2014/10/27 Python
Python设计模式编程中Adapter适配器模式的使用实例
2016/03/02 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python3.4.3下逐行读入txt文本并去重的方法
2018/04/29 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
委托公证书
2014/04/08 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
琅琊山导游词
2015/02/05 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
工人先锋号事迹材料(2016精选版)
2016/03/01 职场文书
Python机器学习三大件之一numpy
2021/05/10 Python