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 相关文章推荐
几个javascript操作word的参考代码
Oct 26 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 Javascript
jQuery.Form上传文件操作
Feb 05 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
vue better-scroll插件使用详解
Jan 25 Javascript
javascript 数组精简技巧小结
Feb 26 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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
Zend的MVC机制使用分析(一)
2013/05/02 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
php使用正则表达式获取字符串中的URL
2016/12/29 PHP
PHP ADODB实现分页功能简单示例
2018/05/25 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
实例浅析js的this
2016/12/11 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
Python 多线程的实例详解
2017/09/07 Python
python 集合 并集、交集 Series list set 转换的实例
2018/05/29 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
利用CSS3的flexbox实现水平垂直居中与三列等高布局
2016/09/12 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
计算机学生求职信范文
2014/01/30 职场文书
心理咨询承诺书
2014/05/20 职场文书
学校运动会广播稿
2014/10/11 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
幼儿教师辞职信
2015/02/27 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
公司联欢会主持词
2015/07/04 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
导游词之河北白洋淀
2020/01/15 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python