用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 相关文章推荐
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
Aug 25 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
wx-charts 微信小程序图表插件的具体使用
Aug 18 Javascript
JS实现盒子拖拽效果
Feb 06 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查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
jquery实现Ctrl+Enter提交表单的方法
2015/07/21 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
python验证码识别教程之利用投影法、连通域法分割图片
2018/06/04 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
python实现邮件自动发送
2019/08/10 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
高中毕业的自我鉴定
2013/12/09 职场文书
劳资协议书范本
2014/04/23 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
2015暑期工社会实践报告
2015/07/13 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
CSS中calc(100%-100px)不加空格不生效
2023/05/07 HTML / CSS