English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Fortschrittsbalken werden in vielen Webseiten verwendet, dieser Artikel beschreibt den Effekt von Fortschrittsbalken, das spezifische Code ist wie folgt:
css2 clip-Eigenschaft zur Implementierung von Fortschrittsbalken auf Webseiten
Bevor wir uns mit der clip-Eigenschaft beschäftigen, lassen Sie uns sie kurz vorstellen, da sie in CSS2.1Wird selten verwendet, daher ist es notwendig, sich damit vertraut zu machen;
Browserkompatibilität: Alle gängigen Browser unterstützen das clip-Attribut.
Clip-Attribut in w3Die offizielle c-Website beschreibt es wie folgt: Durch das Zuschneiden von Elementen wird der sichtbare Bereich des Elements gesteuert. Standardmäßig wird das Element nicht zugeschnitten.
Die Syntax für Clip ist wie folgt:
.xx {clip:rect(<top>, <right>, <bottom>, <left>)}
Das Rect-Attribut erfordert vier Werte, top, right, bottom, left; sie müssen durch Kommata getrennt werden. Sie folgen dem Uhrzeigersinn und haben die gleiche Schreibweise wie margin und padding in CSS.
In CSS2.1In der Regel werden die <top> und <bottom> Offsetwerte vom oberen Rand des Elements aus berechnet, während die <left> und <right> Offsetwerte vom linken Rand des Elements aus berechnet werden. Zum Beispiel:
Wir können noch eine einfache Demo betrachten
Folgendes CSS
p#one { clip: rect(5px, 40px, 45px, 5px); }
p#two { clip: rect(5px, 55px, 45px, 5px); }
Dieser Beispiel ist in50X55px langen Rechteckbox ist eine horizontale Streifenbeschnittung, was zu einem gestrichelten Rechteck führt:
Wie im folgenden Bild gezeigt:
Lassen Sie uns zunächst einen Beispiel-Demo für einen Fortschrittsbalken betrachten;
HTML-Code wie folgt:
<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-Code wie folgt:
.progress-box{position:absolute;left:0;width:300px;height:60px, eine Umrandung:1px fest definierten #000 ergibt eine Umrandung und einen Abstand-links: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;}
Hier muss erläutert werden, was im obigen HTML3div, einer ist der Elementcontainer (progress-box) ist im Grunde darauf ausgelegt, den Rahmen hervorzuheben, damit der Benutzer weiß100% sollte wie lange Kapazität haben,
zweiter progress-bar ist der anzeigende Elementhintergrund, dessen Farbe ständig geändert wird, auf rot gesetzt
Der dritte ist der Wert der anzeigten Fortschrittszahl.
Um den Effekt zu demonstrieren, benötigen wir einen einfachen setInterval-Code in JavaScript, um den Effekt des Fortschrittsbalkens zu demonstrieren; Der folgende setInterval-Code;
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 wie folgt; Demo mit clip zur Beschnitt
Zwei: Verwenden Sie das Fortschrittsereignis (progress) zur Interaktion mit dem Server, um den Fortschrittsbalken auf der Webseite zu realisieren;
Fortschrittsereignis (progress): Definiert Ereignisse, die mit der Kommunikation zwischen Client und Server verbunden sind, und umfasst die folgenden6Ein Fortschrittsereignis.
每个请求不对触发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-Code wie folgt:
<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 = "Received" + event.position + " of " + event.totalSize + " bytes";
console.log(event.target);
var percentComplete = Math.round(event.loaded / event.total);
// where event.loaded represents how many bytes have been loaded so far, and event.total represents the total number of bytes to be loaded. We get this percentage,
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 code to simulate something arbitrary. Of course, it's not like this in actual use! I'm just outputting some content.
<?php
header("Content-Type: text/plain");
header("Content-Length: 27");
echo "Some data";
flush();
echo "Some data";
flush();
echo "Some data";
flush();
?>
Drei: CSS3 Animation und lineare Verlaufsbar Demo;
HTML-Code wie folgt:
<div id="loading-status"> <div id="process"></div> </div>
CSS-Code wie folgt:
#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%;
}
}
Das Ergebnis ist wie folgt:
Erklärung: Der Inhalt dieses Artikels stammt aus dem Internet und ist Eigentum der jeweiligen Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte finden, die möglicherweise urheberrechtlich geschützt sind, senden Sie bitte eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @, wenn Sie eine E-Mail senden, und geben Sie relevante Beweise an. Sobald die Informationen überprüft wurden, wird diese Website die涉嫌侵权的内 容立即删除。)