เมื่อเร็ว ๆ นี้ฉันเห็นหัวข้อในกลุ่มและนำมันออกมาและเขียนมัน
จำเป็นต้อง:
ใช้ HTML, CSS และ JS ดั้งเดิมเพื่อให้ได้เอฟเฟกต์ดังที่แสดงในรูปเอาต์พุตแรกไปข้างหน้าจากนั้นย้อนกลับไปข้างหลังและในที่สุดก็อยู่ในภาพที่สมบูรณ์
อันดับแรก:
รหัสชิ้นส่วน HTML:
<div id = "ผลลัพธ์"> </div>
มันง่ายขนาดนั้น
รหัส CSS:
#Result {WIDTH: 550PX; มาร์จิ้น: 30px auto; ขนาดตัวอักษร: 0; FONT-FAMILY: Consolas, "Liberation Mono", Menlo, Courier, Monospace;}#span ผล {แสดง: inline-block; ความกว้าง: 60px; ความสูง: 25px; ความสูงของสาย: 25px; ขนาดตัวอักษร: 12px; TEXT-ALIGN: CENTER; ชายแดน: 1px Solid #EEE; มาร์จิ้น: -1px 0 0 -1px;}รหัส CSS นั้นง่ายมาก ระยะขอบในช่วงส่วนใหญ่เพื่อกำจัดปัญหาของเส้นขอบสองเท่า
จุดสำคัญถัดไปคือ
รหัส JavaScript:
ก่อนอื่นสร้างฟังก์ชั่นด้วยตารางการคูณ 9*9
ฟังก์ชั่นสร้าง () {var html = []; สำหรับ (var i = 1; i <= 9; i ++) {สำหรับ (var j = 1; j <= i; j ++) {html.push ('<span>'+j+'*'+i+'='+(j*i)+'</span>'); } html.push ('<br/>'); } ส่งคืน html;}1. สร้างอาร์เรย์ว่างเปล่าใหม่เพื่อใส่ตัวอย่างโค้ด HTML:
var html = [];
2. ใช้ A for loop เพื่อสำรวจตารางการคูณ 9*9:
สำหรับ (var i = 1; i <= 9; i ++) {สำหรับ (var j = 1; j <= i; j ++) {// เนื้อหา}}3. ดันเนื้อหาลูปลงในอาร์เรย์ที่ว่างเปล่าที่สร้างขึ้นใหม่:
html.push ('<span>'+j+'*'+i+'='+(j*i)+'</span>');4. โปรดทราบว่าในการใช้บันไดให้เพิ่มอักขระใหม่หลังจากลูป J เสร็จสมบูรณ์:
html.push ('<br/>');5. ในที่สุดอย่าลืมคืนอาร์เรย์ในตอนนี้:
ส่งคืน html;
ฟังก์ชั่นที่สร้างตารางการคูณ 9*9 เสร็จสมบูรณ์
ถัดไปจะปรากฏบนหน้า:
ฟังก์ชั่น inhtml () {var html = create (), i = 0, tmp = create (), timer = null, result = document.getElementById ('ผลลัพธ์'); timer = setInterval (function () {if (i> html.length) {html.splice (html.length-1,1) result.innerhtml = html.join ('');} anle {result.innerhtml+= html [i ++]; tmp.join ('');เรายังคงสร้างฟังก์ชั่นใหม่: inhtml ()
1. ก่อนอื่นประกาศตัวแปรการเริ่มต้นบางอย่าง
var html = create (), // การเรียกใช้ 9*9 ฟังก์ชั่น i = 0, // เริ่มต้นตัวแปร i tmp = create (), timer = null, // เริ่มต้นผลลัพธ์ = document.getElementById ('result'); // รับ ID2. จากนั้นเราสร้างตัวจับเวลาเพื่อแสดงข้อมูลในทางกลับกัน:
timer = setInterval (function () {// content}, 100)ปล่อยให้ตัวจับเวลานี้ดำเนินการหนึ่งครั้งใน 100 มิลลิวินาที
3. จากนั้นเขียนเนื้อหาในตัวจับเวลา:
if (i> html.length) {// ตัดสินว่าฉันมากกว่า html.length หรือไม่ ถ้ามันมากกว่าให้แสดง html.splice (html.length-1,1) result.innerhtml = html.join (');} else {// ถ้ามันน้อยกว่าแสดงผล imnerhtml+= html [i ++]; result.innerhtml = tmp.join (''); ClearInterval (ตัวจับเวลา); // Clear Timer}ฟังก์ชั่น inhtml () ได้ถูกเขียนด้วยดังนั้นสิ่งเดียวที่เหลือคือเรียกมันว่า
inhtml ();
เสร็จ.
คุณสามารถลองด้วยตัวเอง หากคุณมีความคิดที่ดีกว่าโปรดฝากข้อความถึงฉัน
รหัสการใช้งานแบบไดนามิกข้างต้นของเอฟเฟกต์การคูณ 9*9 คือเนื้อหาทั้งหมดที่ฉันได้แชร์กับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น