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 相关文章推荐
jQuery下通过replace字符串替换实现大小图片切换
May 22 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
Sep 16 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
angularjs路由传值$routeParams详解
2020/09/05 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
微信小程序数字滚动插件使用详解
2018/02/02 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
webpack HappyPack实战详解
2019/10/08 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
计算机毕业大学生求职信
2014/06/26 职场文书
年终晚会活动方案
2014/08/21 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
交心谈心活动总结
2015/05/11 职场文书
民事调解协议书
2016/03/21 职场文书
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python