สุ่มรายการ HTML: แสดงรายการรายการ HTML แบบสุ่ม

เรียนรู้ที่จะสุ่มรายชื่อ HTML ที่มีโค้ด JavaScript รายการทั้งสามารถสั่งซื้อ (OL) หรือเรียงลำดับ (UL) วิธีการใช้ฟังก์ชั่นแรนด์เพื่อสับเปลี่ยนองค์ประกอบ LI

A+ A-

ผมมีรายชื่อยาวของ URL ที่ผมอยากจะแสดงบนหน้าเว็บ นอกจากนี้ผมอยาก URL เหล่านี้มักจะมาในลำดับแบบสุ่ม ดังนั้นผมจำเป็นต้องมีวิธีที่จะคว้ารายการ HTML และแล้วสับเปลี่ยนรายการทั้งหมดที่อยู่ในนั้น ตอนแรกผมเป็นบิตที่สูญเสีย แต่แล้วมันจะกลายเป็นสิ่งที่ง่ายมาก!

ผมพบว่า randomizeList ฟังก์ชัน () JavaScript

รหัส JavaScript ต่อไปนี้สามารถสุ่มรายชื่อเว็บ HTML สคริปต์สามารถจัดการทั้งรายการสั่งซื้อ (OL) และรายการเรียงลำดับ (UL) เพราะการทำงานใน รายการ LI ซึ่งเป็นเรื่องปกติของทั้งสองประเภทของรายการ

หากคุณต้องการที่จะสุ่มแสดงรายการในรายการ HTML ทุกครั้งที่โหลดหน้าเว็บที่คุณสามารถเรียก randomizeList () ฟังก์ชันเมื่อเหตุการณ์ onLoad ของแท็กร่างกายเกิดขึ้น และถ้าคุณต้องการที่จะให้การควบคุมให้กับผู้ใช้เช่นคุณต้องการที่จะสุ่มรายชื่อในการคลิกปุ่มแล้วคุณสามารถเรียกใช้ฟังก์ชันเดียวกันเมื่อมีเหตุการณ์ onClick ปุ่มที่เกิดขึ้น

JavaScript เป็นที่สวยงาม!

JavaScript เป็นที่สวยงาม!

คุณก็จะต้องผ่าน ID ของรายการที่คุณต้องการที่จะสุ่ม รหัสควรจะกำหนดไว้ในบรรทัดแรกของ randomizeList () ฟังก์ชั่นได้รับด้านล่าง:


function randomizeItems(items)
{
    var cached = items.slice(0), temp, i = cached.length, rand;
    while(--i)
    {
        rand = Math.floor(i * Math.random());
        temp = cached[rand];
        cached[rand] = cached[i];
        cached[i] = temp;
    }
    return cached;
}
function randomizeList()
{
var list = document.getElementById("myItems");
    var nodes = list.children, i = 0;
    nodes = Array.prototype.slice.call(nodes);
    nodes = randomizeItems(nodes);
    while(i < nodes.length)
    {
        list.appendChild(nodes[i]);
        ++i;
    }
list.style.display="block";
}

ตรวจสอบให้แน่ใจว่าคุณสามารถแทนที่ myItems ใน randomizeList () ฟังก์ชันที่มี ID ของรายการ HTML ของคุณ วิธีการนี​​้ได้รับถือของโหนดทั้งหมดภายใต้รายการที่มีให้ โหนดเหล่านี้เป็นองค์ประกอบ LI จากนั้นก็เพียงแค่ใช้ฟังก์ชัน Rand () ของจาวาสคริปต์ในการสับเปลี่ยนองค์ประกอบ LI เหล่านี้และส่งกลับสแต็คจัดสุ่ม ในขณะที่คุณสามารถดูจากตัวอย่างนี้ความสามารถในการสำรวจ Document Object Model (DOM) เป็นสิ่งจำเป็นในการพัฒนาแอพลิเคชันเว็บจำนวนมาก ถึงแม้ว่าผมจะไม่ได้ใช้ createTreeWalker () วิธีการที่นี่ แต่มันก็เป็น จริงๆวิธีที่ง่ายในการสำรวจต้นไม้ DOM

ฉันหวังว่าเคล็ดลับนี้เป็นประโยชน์สำหรับคุณ กรุณาแจ้งให้เราทราบหากคุณประสบปัญหาใด ๆ ในรหัสนี้ ขอขอบคุณที่ใช้ TechWelkin

Ads

หุ้น

ร้อนในสัปดาห์

เมื่อเร็ว ๆ นี้

ทางเลือกที่ดีที่สุดอูบุนตูที่มองหาถ้าคุณเป็นคนรักของลินุกซ์

ขอเริ่มต้นโดยได้รับคุ้นเคยกับบางสิ่งบางอย่าง; พื้นฐาน แต่บิ...

วิธีการเพิ่มลายเซ็นใน Gmail กล่องขาเข้า - เพิ่มลายเซ็นของ Google ใน Gmail

กล่องขาเข้าโดย Google เป็นหนึ่งในสิ่งที่ดีที่สุดของ Google ...

Weekly Tech News: Nokia, Google และนินเทน

สวัสดีครับทุกคนก็ศุกร์ 3 มีนาคมและเช่นเดียวเสมอเรากลับมาพร้...

โครงการ Pi ราสเบอร์รี่สำหรับมือใหม่ - คุณสามารถทำอะไรกับราสเบอร์รี่ Pi

ราสเบอร์รี่ Pi เป็นชุดของพลังงานต่ำคอมพิวเตอร์บอร์ดเดียวที่...

VPN ที่ดีที่สุดสำหรับ Android 2017 - วิธีการใช้ VPN ใน Android

ไปเป็นวันเมื่อ VPNs เพียงสำหรับเทคโนโลยี savvies และแฮกเกอร...

ความคิดเห็น