Wenn wir im Internet surfen, sehen wir häufig die Eingabeaufforderung LOADING, die beim Laden von Daten erscheint. Tatsächlich ist das Prinzip dieser Funktion sehr einfach, das heißt, ein DIV deckt die aktuelle Seite ab und wird dann auf der abgedeckten DIV-Ebene angezeigt. Jetzt implementieren wir es.
1.Aktuelle Seite:
Kopieren Sie den Codecode wie folgt:
<div><a href="#" onclick="showLoading()">Laden</a></div>
2. Maskenebene:
Kopieren Sie den Codecode wie folgt:
<div id="over"></div>
3. Anzeigeebene laden:
Kopieren Sie den Codecode wie folgt:
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
Gesamtcode:
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title></title>
<style type="text/css">
.aktuell ein {
Schriftgröße: 20px;
}
.über {
Anzeige: keine;
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 100 %;
Hintergrundfarbe: #f5f5f5;
Deckkraft:0,5;
Z-Index: 1000;
}
.layout {
Anzeige: keine;
Position: absolut;
oben: 40 %;
links: 40 %;
Breite: 20 %;
Höhe: 20 %;
Z-Index: 1001;
text-align:center;
}
</style>
<script type="text/javascript">
Funktion showLoading()
{
document.getElementById("over").style.display = "block";
document.getElementById("layout").style.display = "block";
}
</script>
</head>
<Körper>
<div><a href="#" onclick="showLoading()">Laden</a></div>
<div id="over"></div>
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</body>
</html>
Endeffekt:
Ich habe auch eine andere Implementierungsmethode im Internet gesehen, die darin besteht, den Wert des HTML-Tags kontinuierlich zu ändern, um den Effekt von Ladeaufforderungen zu erzielen Der Code lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<title></title>
<!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
<style type="text/css">
#tb {
Breite: 100 %;
Höhe: 100 %;
Zeilenhöhe: 10px;
}
#tb tr td {
Textausrichtung: Mitte;
}
.progressbar {
Schriftfamilie: Arial;
Schriftstärke: fetter;
Farbe: grau;
Hintergrundfarbe: weiß;
Polsterung: 0px;
Rahmenstil: keiner;
}
.Prozent {
Schriftfamilie: Arial;
Farbe: grau;
Textausrichtung: Mitte;
Randbreite: mittel;
Rahmenstil: keiner;
}
</style>
<script type="text/javascript">
var bar = 0;
var step = "||";
/*
*Der erste Weg ist: $(document).ready(function(){.....});
*/
//$(function () {
// Fortschritt();
//});
/*
*Der zweite Weg
*/
//window.onload = function () {
// Fortschritt();
//}
/*
*Der dritte Weg simuliert $(document).ready(function(){.....});
*/
(Funktion () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i]( };
var d = Dokument;
d. bereit = Funktion (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
wenn (d. h.)
(Funktion () {
Versuchen Sie es mit { d.documentElement.doScroll('left');
Catch (err) { setTimeout(arguments.callee, 0);
})();
sonst wenn (Woche)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();
document.ready(function () {
Fortschritt();
});
Funktion progress() {
Balken = Balken + 2;
Schritt = Schritt + "||";
document.getElementById("percent").value = bar + "%";
document.getElementById("progressbar").value = step;
if (bar <= 98) {
setTimeout("progress()", 100);
}
}
</script>
</head>
<Körper>
<table id="tb">
<tr>
<td>
<input type="text" size="50" id="percent" /></td>
</tr>
<tr>
<td>
<input type="text" size="50" id="progressbar" /></td>
</tr>
</table>
</body>
</html>
Endeffekt: