เมื่อเราท่องเว็บ เรามักจะเห็นข้อความแจ้ง LOADING ปรากฏขึ้นเมื่อมีการโหลดข้อมูล ที่จริงแล้ว หลักการของฟังก์ชันนี้ง่ายมาก นั่นคือ DIV ครอบคลุมหน้าปัจจุบัน จากนั้น Loading จะแสดงบนเลเยอร์ DIV ที่ครอบคลุม ตอนนี้เรามาใช้งานมันกันดีกว่า
1.หน้าปัจจุบัน:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div><a href="#" onclick="showLoading()">กำลังโหลด</a></div>
2. ชั้นมาส์ก:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="เหนือ"></div>
3. กำลังโหลดเลเยอร์การแสดงผล:
คัดลอกรหัสรหัสดังต่อไปนี้:
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
รหัสโดยรวม:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<title></title>
<style type="text/css">
.ปัจจุบัน {
ขนาดตัวอักษร: 20px;
-
.เกิน {
จอแสดงผล: ไม่มี;
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
ซ้าย: 0;
ความกว้าง: 100%;
ความสูง: 100%;
สีพื้นหลัง: #f5f5f5;
ความทึบ:0.5;
ดัชนี z: 1,000;
-
.รูปแบบ {
จอแสดงผล: ไม่มี;
ตำแหน่ง: แน่นอน;
ด้านบน: 40%;
ซ้าย: 40%;
ความกว้าง: 20%;
ความสูง: 20%;
ดัชนี z: 1001;
การจัดตำแหน่งข้อความ: กึ่งกลาง;
-
</สไตล์>
<script type="text/javascript">
ฟังก์ชั่น showLoading()
-
document.getElementById("over").style.display = "block";
document.getElementById("เค้าโครง").style.display = "บล็อก";
-
</สคริปต์>
</หัว>
<ร่างกาย>
<div><a href="#" onclick="showLoading()">กำลังโหลด</a></div>
<div id="เหนือ"></div>
<div id="layout"><img src="//files.VeVB.COm/file_images/article/201311/2013112931.gif" /></div>
</ร่างกาย>
</html>
ผลสุดท้าย:
ฉันยังเห็นวิธีการใช้งานอื่นบนอินเทอร์เน็ต ฉันคิดว่าแนวคิดนี้ดีซึ่งก็คือการใช้ JS เพื่อเปลี่ยนค่าของแท็ก html อย่างต่อเนื่องเพื่อให้บรรลุผลของการโหลดตามความคิดของเขา รหัสมีดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<title></title>
<!-- <script src="Scripts/jquery-1.8.2.js"></script>-->
<style type="text/css">
#tb {
ความกว้าง: 100%;
ความสูง: 100%;
ความสูงของบรรทัด: 10px;
-
#tb tr td {
การจัดแนวข้อความ: กึ่งกลาง;
-
.แถบความคืบหน้า {
ตระกูลฟอนต์: Arial;
น้ำหนักตัวอักษร: โดดเด่นยิ่งขึ้น;
สี: สีเทา;
สีพื้นหลัง: สีขาว;
ช่องว่างภายใน: 0px;
สไตล์เส้นขอบ: ไม่มี;
-
.เปอร์เซ็นต์ {
ตระกูลฟอนต์: Arial;
สี: สีเทา;
การจัดแนวข้อความ: กึ่งกลาง;
เส้นขอบกว้าง: ปานกลาง;
สไตล์เส้นขอบ: ไม่มี;
-
</สไตล์>
<script type="text/javascript">
วาร์บาร์ = 0;
ขั้นตอน var = "||";
-
*วิธีแรกคือ: $(document).ready(function(){.....});
-
//$(ฟังก์ชัน () {
// ความคืบหน้า();
-
-
*วิธีที่สอง
-
//window.onload = ฟังก์ชั่น () {
// ความคืบหน้า();
-
-
*วิธีที่ 3 จำลอง $(document).ready(function(){.....});
-
(การทำงาน () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
วาร์ fn = [];
var run = function () { สำหรับ (var i = 0; i < fn.length; i++) fn[i]();
var d = เอกสาร;
d พร้อม = ฟังก์ชั่น (f) {
ถ้า (!ie && !wk && d.addEventListener)
กลับ d.addEventListener ('DOMContentLoaded', f, false);
ถ้า (fn.push(f) > 1) กลับ;
ถ้า (เช่น)
(การทำงาน () {
ลอง { d.documentElement.doScroll('left'); run();
catch (ผิดพลาด) { setTimeout(arguments.callee, 0);
-
อย่างอื่นถ้า (สัปดาห์)
var t = setInterval (ฟังก์ชัน () {
ถ้า (/^(โหลดแล้ว|เสร็จสมบูรณ์)$/.test(d.readyState))
clearInterval(t), วิ่ง();
}, 0);
-
-
เอกสารพร้อม (ฟังก์ชั่น () {
ความคืบหน้า();
-
ความคืบหน้าของฟังก์ชัน () {
บาร์ = บาร์ + 2;
ขั้นตอน = ขั้นตอน + "||";
document.getElementById("เปอร์เซ็นต์").value = bar + "%";
document.getElementById("progressbar").value = ขั้นตอน;
ถ้า (บาร์ <= 98) {
setTimeout("ความคืบหน้า()", 100);
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<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>
</ตาราง>
</ร่างกาย>
</html>
ผลสุดท้าย: