English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Ленточка прогресса используется во многих веб-сайтах, и в этой статье介绍的就是进度条效果，например, следующий код:
1: Атрибут clip в css2 для реализации веб-прогрессной полосы;
Прежде чем приступить к реализации,我们先介绍一下 атрибут clip, так как этот атрибут редко используется в css2.1, и поэтому有必要 узнать о нем.
Уровень поддержки браузерами: все основные браузеры поддерживают атрибут clip.
Атрибут clip описан на сайте w3c следующим образом: управление видимым полем элемента через вырезание, по умолчанию элемент не выполняет никакого вырезания.
Грамматика выреза:
.xx {вырезать:rect(<top>, <right>, <bottom>, <left>)}
Атрибут rect требует четырех значений, top, right, bottom, left; они должны быть разделены запятыми. Следуя правилу поворота по часовой стрелке, как в нашем css с margin и padding.
В css2.1, <top> и <bottom> для rect() указывают смещение от верхнего края коробки элемента, <left> и <right> указывают смещение от левого края коробки элемента. Вот так:
Давайте еще раз看一下 простой демонстрацию;
Вот так css
p#one { вырезать: rect(5px, 40px, 45px, 5px); }
p#two { вырезать: rect(5px, 55px, 45px, 5px); }
В предыдущем примере выполняется вырез в прямоугольнике 50x55px, получая сплошной прямоугольник с пунктирной линией:
如下图：
Теперь我们先来看一个 демонстрацию进度ной полосы;
HTML код таков:
<h2>Using clip to implement cropping 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{положение:абсолютное;левый:0;ширина:300px;высота:60px;граница:1px сплошная #000;отступ-левый:20px;}
.progress-bar{положение:абсолютное;левый:0;верхний:0;ширина:300px;высота:60px;вырезать:rect(0px,0px,60px,0px);фondo:красный;}
.progress-text{положение:абсолютное;левый:0;верхний:0;ширина:300px;высота:60px;цвет:Черный;текст-выравнивание:центр;линия-высота:60px;семейство-шрифтов:Georgia;размер-шрифта:2em;толщина-шрифта:жирный;}
Здесь нужно объяснить три div в HTML, один из которых - это контейнер элемента (progress-box), который подчеркивает рамку, чтобы пользователь знал, насколько длинным должно быть 100%.
Второй progress-bar - это элемент, показывающий изменяющийся фоновый цвет, установленный в красный цвет.
Третий - это текстовое значение, показывающее прогресс.
Для демонстрации эффекта нам нужно простую строку кода setInterval в JavaScript для демонстрации эффекта полосы загрузки; Вот строка кода 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++;
}
}
Пример эффекта: Использование clip для создания демо裁剪.
Два: Использование событий progress для взаимодействия с сервером для реализации полосы загрузки веб-страницы;
События progress (прогресс): Определяют события, связанные с коммуникацией между клиентом и сервером, и включают следующие 6 событий прогресса.
Каждый запрос не начинается с события Loadstart,接着是一或多个progress события, затем срабатывает одно из событий error, abort или load, и заканчивается событием loadend.
Поддерживаемые браузеры для первых 5 событий: Firefox 3.5+, Safari 4+, Chrome, iOS Safari и Android WebKit.
This event is triggered periodically during the browser's reception of new data. The onprogress event handler receives an event object, whose target property is the XHR object, but it also contains three additional properties: lengthComputable, position, and totalSize. LengthComputable is a boolean value indicating whether progress information is available, position indicates the number of bytes received, and totalSize indicates the expected number of bytes according to the Content-Length header. With this information, we can create a progress indicator for the user. The following screenshot shows the three parameters mentioned above;}
HTML код таков:
<h2>Using clip to implement cropping 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>
The code for interacting with the server is as follows:
var divbar = document.getElementById("progress-bar"),
divText = document.getElementById("progress-text");
var cent = 0;
max = 300;
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 = "Received" + 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 код для примера, чтобы показать, как это можно сделать, конечно, на практике это будет выглядеть differently! Я просто выводлю содержимое;
<?php
header("Content-Type: text/plain");
header("Content-Length: 27");
echo "Some data";
flush();
echo "Some data";
flush();
echo "Some data";
flush();
?>
Третий: реализация полосы прогресса с помощью анимации CSS3 и линейного градиента;
HTML код таков:
<div id="loading-status"> <div id="process"></div> </div>
CSS код如下:
#loading-status {ширина:300px;граница:1px solid #669CB8;-webkit-box-shadow: 0px 2px 2px #D0D4D6; -moz-box-shadow:0px 2px 2px #D0D4D6;руглость: 10px;высота:20px;padding: 1px;}
#process {ширина: 80%;высота: 100%;руглость: 10px;фondo: -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% {
ширина: 0%;
}
100% {
ширина: 80%;
}
}
Эффекты такие:
Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, материалы предоставлены пользователями Интернета в порядке добровольного вклада и загрузки, сайт не имеет права собственности, не производится редактирование человеком, не несет ответственности за соответствующие юридические вопросы. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма, пожалуйста, замените # на @) для сообщения о нарушении,并提供相关证据. При обнаружении фактов, сайт немедленно удаляет涉嫌侵权的内容。