Javascript+CSS3实现进度条效果


Posted in Javascript onOctober 28, 2016

进度条在很多web中都能用的到,本文就是介绍了进度条效果,具体代码如下:

一:css2 属性clip实现网页进度条;

在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下;

浏览器支持程度:所有主流浏览器都支持 clip 属性。

Clip属性在w3c官网是这样描述的:通过对元素进行裁剪来控制元素的可视区域,默认情况下 元素是不进行任何裁剪的。

Clip裁剪的语法如下:

 .xx {clip:rect(<top>, <right>, <bottom>, <left>)}

Rect属性需要四个值,top,right,bottom,left;他们之间需要使用逗号隔开。遵循顺时针旋转规则,和我们的css中的margin,padding书写顺序一样的。

在css2.1中,rect()的<top>,<bottom>指定偏移量是从元素的盒子顶部边缘算起的,<left>,<right>指定的偏移量是从元素的盒子左边边缘算起的。如下:

Javascript+CSS3实现进度条效果

我们可以再来看一个简单的demo,

如下css

p#one { clip: rect(5px, 40px, 45px, 5px); }

p#two { clip: rect(5px, 55px, 45px, 5px); }

上面的例子是在50X55px的长方形盒子中是行剪切,得到虚线的长方形:

如下图:

Javascript+CSS3实现进度条效果

我们现在可以先来看一个进度条的demo;

HTML代码如下:

<h2>使用clip实现裁剪demo</h2>
<div id="progress-box" class="progress-box">
  <div id="progress-bar" class="progress-bar"></div>
  <div id="progress-text" class="progress-text">0%</div>
</div>

CSS代码如下:

.progress-box{position:absolute;left:0;width:300px;height:60px;border:1px solid #000;margin-left:20px;}
.progress-bar{position:absolute;left:0;top:0;width:300px;height:60px;clip:rect(0px,0px,60px,0px);background:red;}
.progress-text{position:absolute;left:0;top:0;width:300px;height:60px;color:Black;text-align:center; line-height:60px; font-family:Georgia;font-size:2em;font-weight:bold;}

这里需要解释一下上面的HTML3个div,一个是元素容器(progress-box)基本就是想突出边框,让用户知道100%应该是有多长的容量,

第二个progress-bar是表示不断变化的元素背景色设置为红色,

第三个是表示进度显示的数值文本。

为了演示效果,我们需要一个简单的JS中的setInterval代码来演示进度条的效果;如下setInterval的代码;

var bar = document.getElementById("progress-bar"),
   text = document.getElementById("progress-text");
var cent = 0,
   max = 300;
var timer = setInterval(progressFn, 30);
function progressFn() {
  if(cent > max) {
    cent = 0;
    timer = setInterval(arguments.callee(), 30);
  }else {
    bar.style.clip = "rect(0px," + cent + "px,60px,0px)";
    text.innerHTML = Math.ceil((cent / max) * 100) + "%";
    cent++;
  }
}

demo如下效果;使用clip实现裁剪demo

Javascript+CSS3实现进度条效果

二:使用进度事件(progress)与服务器端交互 来实现网页进度条;

进度事件(progress) : 定义了与客户端服务器通信有关的事件,有以下6个进度事件。

  1. loadstart:在接收到相应数据的第一个字节时触发。
  2. progress:在接收相应期间持续不断触发。
  3. error:在请求发生错误时触发。
  4. abort:在因为调用abort()方法而终止链接时触发。
  5. load:在接收到完整的相应数据时触发。
  6. loadend:在通信完成或者触发error、abort或load事件后触发。

每个请求不对触发Loadstart事件开始,接下来是一或多个progress事件,然后触发error、abort或load事件中的一个,最后以触发loadend事件结束。

支持前5个事件的浏览器有Firefox 3.5+、Safari 4+、Chrome、iOS版Safari和Android版WebKit。

这个事件会在浏览器接收新数据期间周期性地触发。而onprogress事件处理程序会接收到一个event对象,其target属性是XHR对象,但包含着三个额外的属性:lengthComputable、position和totalSize。其中,lengthComputable是一个表示进度信息是否可用的布尔值,position表示已经接收的字节数,totalSize表示根据Content-Length相应头部确定的预期字节数。有了这些信息,我们就可以为用户创建一个进度指示器了。如下截图有上面介绍的三个参数;

Javascript+CSS3实现进度条效果

HTML代码如下:

<h2>使用clip实现裁剪demo</h2>
<div id="progress-box" class="progress-box">
  <div id="progress-bar" class="progress-bar"></div>
  <div id="progress-text" class="progress-text">0%</div>
</div>
<div id="status"></div>

与服务器端交互的代码如下:

var divbar = document.getElementById("progress-bar"),
  divText = document.getElementById("progress-text");
var cent = 0,
  max = 300;
function createXHR(){
   var xhr;
   if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
     xhr=new XMLHttpRequest();
   }else{ // code for IE6, IE5
     xhr=new ActiveXObject("Microsoft.XMLHTTP");
   }
   return xhr;
 }
 var xhr = createXHR();
 xhr.onload = function() {
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
     alert(xhr.responseText);
  }else {
     alert("Request was unsuccessful: " + xhr.status);
  }
 }
 xhr.onprogress = function(event) {
  var divStatus = document.getElementById("status");
  if (event.lengthComputable) {
      divStatus.innerHTML = "Recived" + event.position + " of " + event.totalSize + " bytes";
      console.log(event.target);
      var percentComplete = Math.round(event.loaded / event.total);
      // 其中的event.loaded表示当前加载了多少字节流,而event.total表示总共有多少字节流 得到这样一个百分比,
      console.log(event.loaded, event.total, 300 * percentComplete);
      progressFn(300 * percentComplete, max);
   }
 }
    
 xhr.open("get", "progress.php", true);
 xhr.send(null); 
 function progressFn(cent,max) {
   if (cent < max) {
     divbar.style.clip = "rect(0px," + cent + "px,60px,0px)";
     divText.innerHTML = Math.ceil((cent / max) * 100) + "%";
   } 
 }

PHP代码 为了随便模拟下 随便写一个,当然在实际使用上肯定不是这样的哦!我只是输出一个内容而已;

<?php
  header("Content-Type: text/plain");
  header("Content-Length: 27");
  echo "Some data";
  flush();
  echo "Some data";
  flush();
  echo "Some data";
  flush();
?>

三: CSS3 动画及线性渐变实现进度条demo;

HTML代码如下:

<div id="loading-status">
  <div id="process"></div>
</div>

CSS代码如下:

#loading-status {width:300px;border:1px solid #669CB8;-webkit-box-shadow: 0px 2px 2px #D0D4D6; -moz-box-shadow:0px 2px 2px #D0D4D6;border-radius: 10px;height:20px;padding: 1px;}
#process {width: 80%;height: 100%;border-radius: 10px;background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF));-webkit-animation: load 3s ease-out infinite;}
@-webkit-keyframes load {
  0% {
    width: 0%;      
  }
  100% {
    width: 80%;    
  }
}

效果如下:

Javascript+CSS3实现进度条效果

Javascript 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
Mootools 1.2教程 类(一)
Sep 15 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
浅谈javascript中基本包装类型
Jun 03 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
Jan 04 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 #Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 #Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 #Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 #Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 #Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 #Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 #Javascript
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JS原型对象通俗&quot;唱法&quot;
2012/12/27 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
js 一个关于图片onload加载的事
2013/11/10 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
Vue实现table上下移动功能示例
2019/02/21 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
python实现迭代法求方程组的根过程解析
2019/11/25 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python可视化实现代码
2019/01/15 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
浅谈django channels 路由误导
2020/05/28 Python
利用python爬取有道词典的方法
2020/12/08 Python
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
计算机开发个人求职信范文
2013/09/26 职场文书
护士自荐信怎么写
2013/10/18 职场文书
电工工作职责范本
2014/02/22 职场文书
项目工作说明书
2014/07/29 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
中学生自我评价2015
2015/03/03 职场文书
蓝天保卫战收官在即 :15行业将开展环保分级评价
2019/07/19 职场文书
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript