เทคนิคพิเศษของเว็บ: เทคนิคการแสดงภาพแบบสุ่ม

การแสดงรูปภาพแบบสุ่มเป็นเทคนิคที่ใช้กันอย่างแพร่หลาย ตัวอย่างเช่น แบนเนอร์แบบสุ่มจะปรากฏขึ้น เมื่อคุณเข้าสู่เว็บไซต์ แบนเนอร์ของเว็บไซต์จะแตกต่างออกไปเสมอ หรือมีคำแนะนำเกี่ยวกับเนื้อหาที่แตกต่างกันอยู่เสมอ คุณมักจะพบตัวอย่างดังกล่าวเมื่อท่องอินเทอร์เน็ต การใช้เทคโนโลยีนี้ไม่เพียงแต่สามารถใส่เนื้อหาได้มากขึ้นในพื้นที่หนึ่งเท่านั้น แต่ยังทำให้ผู้คนเห็นภาพลวงของการอัพเดทบ่อยครั้งอีกด้วย

คุณตื่นเต้นแค่ไหน? ที่จริงแล้ว ตราบใดที่คุณมีความรู้พื้นฐานเกี่ยวกับ html และ javascript เพียงเล็กน้อย ทุกอย่างก็ง่ายมาก ตามฉันมาและมาดูความลับแบบสุ่มของเธอกันดีกว่า

เริ่มต้นด้วยตัวอย่างง่ายๆ โดยปกติแล้วเราจะเพิ่มรูปภาพลงในเพจโดยใช้ <img src="picture"> หากเราต้องการแสดงรูปภาพที่แตกต่างกัน 3 รูปแบบสุ่ม เราจำเป็นต้องแก้ไขโค้ดนี้เล็กน้อย ขั้นแรก ให้เพิ่มแท็ก <script>:

ต่อไปนี้เป็นส่วนที่ยกมา:
<ภาษาสคริปต์=javascript></script>
จากนั้นใส่ <img src="picture"> ในแท็กนี้โดยใช้ document.write("") และจะกลายเป็น
document.write("<img src=image>")

ตอนนี้มาจบย่อหน้าที่สำคัญที่สุด:

นี่คือคำพูด:
id=Math.round(Math.random()*2)+1

ด้วยวิธีนี้ จะได้ตัวเลขสุ่มเป็น 1, 2 และ 3 เปลี่ยนชื่อรูปภาพที่คุณต้องการแสดงเป็น 1.gif, 2.gif, 3.gif โอเค! รหัสสุดท้ายคือ:

นี่คือตัวอย่างราคา:
<ภาษาสคริปต์=จาวาสคริปต์>
id=Math.round(Math.random()*2)+1
document.write("<img src="+id+".gif>")
</สคริปต์>

ลองดูสิ ไม่ดีเหรอ? แล้วถ้ารูปภาพแต่ละรูปของฉันตรงกับไฮเปอร์ลิงก์ล่ะ?
สมมติว่ามีรูปภาพ 3 รูป ได้แก่ 1.gif, 2.gif, 3.gif และลิงก์ที่เกี่ยวข้องคือ url1, url2 และ url3
เพื่อให้มีความสอดคล้องกันระหว่างรูปภาพและลิงก์ เราจำเป็นต้องตั้งค่ารูปภาพอาร์เรย์เพื่อวางที่อยู่ของลิงก์ ดังนี้:

ต่อไปนี้เป็นส่วนอ้างอิง:
var image=อาร์เรย์ใหม่(3)
ภาพ.ความยาว=3
ภาพ[1]="url1"
ภาพ[2]="url2"
ภาพ[3]="url3"

เพื่อให้ได้ลิงค์ที่ตรงกับรูปภาพ เราต้องกำหนดอาร์เรย์ imageurl=image[id]
หลักการคือ:
เมื่ออ่านเพจแล้ว จะมีการสุ่มตัวเลข สมมติว่าเป็น 2 นั่นคือ id=2 จากนั้นเราก็สามารถแสดง 2.gif บนเพจดังข้างต้นได้อย่างง่ายดาย จากนั้นเราจะเห็น: imageurl=image[2] และ image[2]="url2" ที่เหลือก็ง่าย รหัสที่สมบูรณ์มีดังนี้:

ต่อไปนี้เป็นส่วนที่ยกมา:
<ภาษาสคริปต์=จาวาสคริปต์>
var image=อาร์เรย์ใหม่(3)
ภาพ.ความยาว=3
ภาพ[1]="url1"
ภาพ[2]="url2"
ภาพ[3]="url3"
id=Math.round(Math.random()*2)+1
imageurl=รูปภาพ[id]
document.write("<a href="+bannerurl+">"+"<img src="+id+".gif>")
</สคริปต์>

พิมพ์ซ้ำจาก: Seven Color Bird Design---pc-king