English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 所在位置
  2. 首页
  3. 经验笔记
  4. 正文

Javascript+CSS3프로그래스 바 효과 구현

진행 바는 많은 웹에서 사용될 수 있으며, 이 기사는 진행 바 효과를 설명합니다. 구체적인 코드는 다음과 같습니다：

1: 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> 지정된 오프셋은 요소의 상자의 왼쪽 경계에서부터 계산됩니다. 다음과 같습니다：

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

如下css

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

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

上面的例子是在50X55px의 장方形 상자에서는 행剪切이 되어 흐릿한 장方形를 얻습니다：

如下图：

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

HTML 코드는 다음과 같습니다：

<h2>사용 clip로 잘라내는 데모</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

二：使用进度事件(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와 관련된 헤더를 통해 결정한 예상 바이트 수를 가지고 있습니다. 이 정보를 통해 사용자에게 진행指示기를 만들 수 있습니다. 아래 캡처는 위에서 소개된 세 가지 매개변수를 포함하고 있습니다;

HTML 코드는 다음과 같습니다：

<h2>사용 clip로 잘라내는 데모</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);
      // 이벤트 로드드 로드된 바이트 수를 나타내며, 총 바이트 수를 나타냅니다. 이와 같은 퍼센트를 얻습니다;
      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();
?>

3: CSS3 애니메이션 및 선형 연속 변환으로 진행 표시기 데모를 구현합니다；

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%;    
  }
}

결과는 다음과 같습니다：

성명서: 본문은 인터넷에서 가져왔으며, 저작권자는 본인입니다. 내용은 인터넷 사용자가 자발적으로 기여하고 업로드한 것이며, 이 사이트는 소유권을 가지지 않으며, 인공 편집 처리를 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 위반 내용을 발견하면, notice#w 이메일로 발송하여 주시기 바랍니다.3codebox.com（이메일을 보내면, #을 @으로 변경하십시오. 신고를 해 주시고 관련 증거를 제공하시면, 사이트는 즉시 위반 내용을 삭제합니다.

기본 가이드
좋아하는 것