เมื่อใดก็ตามที่เป็นเทศกาลที่สำคัญของเว็บไซต์หลักที่สำคัญจะสวมใส่เทศกาล วางปุ่ม "ปิด" บนแผนภูมิพื้นหลัง
เราใช้ JavaScript เพื่อควบคุมการแสดงผลและซ่อนภาพพื้นหลัง โหลด.
HTML
ปุ่มปิดของภาพพื้นหลังทั่วไปถูกวางไว้ที่หัวของหน้า
คัดลอกรหัสรหัสดังนี้:
<div id = "top">
<em id = "close_btn"> </em>
</div>
CSS
คุณต้องเตรียมภาพพื้นหลังขนาดใหญ่
คัดลอกรหัสรหัสดังนี้:
*{มาร์จิ้น: 0;
ร่างกาย {ตัวอักษร: 12px/18px "Microsoft Yahei", Tahoma, Arial, Verdana, "/5b8b/4f53", sans-serif;}
#top {Clear: ทั้งสอง;
#close_btn {ความกว้าง: 60px;
แสดง: บล็อก;
หลังจากปรับใช้ CSS หน้าไม่มีผล
จาวาสคริปต์
เมื่อหน้าโหลดครั้งแรก (ในเวลานี้ไม่มีคุกกี้ ฯลฯ ) แน่นอนว่ารูปภาพพื้นหลังจะต้องโหลดเพื่อแสดงเอฟเฟกต์หน้าสมบูรณ์ เมื่อเราคลิกปุ่ม "ปิด" ในเวลานี้ JavaScript จะฆ่ารูปภาพพื้นหลังที่โหลดบนหน้าเว็บนั่นคือไม่แสดงและตั้งค่าคุกกี้ควบคุมภาพพื้นหลังขนาดใหญ่ผ่านเวลาหมดอายุของคุกกี้ นั่นคือเมื่อหน้านั้นสดชื่นหากคุกกี้ไม่หมดอายุภาพพื้นหลังขนาดใหญ่จะไม่ถูกโหลดและภาพพื้นหลังขนาดใหญ่จะโหลดโปรดดูรหัส:
คัดลอกรหัสรหัสดังนี้:
$ (function () {
iftcookie ("mainbg") == 0) {
$ ("Body, HTML")
$ ("#close_btn")
} อื่น {
$ ("body")
$ ("html")
$ ("#close_btn")
-
// คลิกเพื่อปิด
$ ("#close_btn")
$ ("Body, HTML")
$ ("#close_btn")
SetCookie ("Mainbg", "0");
-
-
เห็นได้ชัดว่าเราควบคุมการโหลดแผนภาพพื้นหลังโดยการตั้งค่าคุณสมบัติพื้นหลังพื้นหลัง CSS ขององค์ประกอบหน้าและอ่านและตั้งค่าคุกกี้ผ่านฟังก์ชั่นที่กำหนดเองสองฟังก์ชั่นของ GetCookie () และ SetCookie ()
คัดลอกรหัสรหัสดังนี้:
// ตั้งค่าคุกกี้
ฟังก์ชั่น setCookie (ชื่อ, ค่า) {
var exp = วันที่ใหม่ ();
exp.settime (exp.gettime () + 1*60*60*60*1000);
document.cookie = name + "=" + escape (value) + "; expires =" + exp.togmtring ();
-
// ใช้ฟังก์ชันคุกกี้
ฟังก์ชั่น getCookie (ชื่อ) {
var anrr = document.cookie.match (ใหม่ regexp ("(" (^|) "+ชื่อ+" = ([^;]*) (; | $) "))));
ถ้า (arr! = null) return unescape (arr [2]);
-