กรณีต่อไปนี้ใช้ js เพื่อใช้เอฟเฟกต์เลเยอร์ลอยหน้า และใช้ js เพื่ออ่านและเขียนคุกกี้ผ่านสองวิธีเพื่อให้ได้สถานะการแสดงผลของผู้ใช้ที่ปิดโฆษณา
ผู้อ่านสามารถคัดลอกโค้ดต่อไปนี้ไปยังไฟล์ html เพื่อลองใช้เอฟเฟกต์นั้น แท็กล่วงหน้าของ html มีวิธีการใช้งาน js สองวิธี
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE HTML>
<html>
<หัว>
<meta content="text/html;charset=utf-8" http-equiv="ประเภทเนื้อหา"/>
<meta content="หยางไก่" name="description"/>
<meta name="author" content="http://blog.csdn.net/tianyazaiheruan"/>
<meta name="copyright" content="ลิขสิทธิ์โดย หยางไก่"/>
<title>IT_Blog_หยางไก่</title>
</หัว>
<ร่างกาย>
<div>
ผู้เขียนบทความนี้: IT_Blog_Yang Kai
โปรดระบุแหล่งที่มาเมื่อพิมพ์ซ้ำ: <a href=”http://blog.csdn.net/yangkai_hudong”>http://blog.csdn.net/yangkai_hudong</a>
</div>
<br>
<div>
<ก่อน>
1. อันแรก: ใช้ไลบรารีคุกกี้ของ jQuery
ตัวอย่างคือ js ที่ใช้อยู่ในปัจจุบันรหัสที่เกี่ยวข้องมีดังนี้:
$(เอกสาร).ready(ฟังก์ชั่น () {
var adCookie=$.cookie("docCookie");
//หากไม่มีคุกกี้ในเครื่อง ให้เขียนคุกกี้รายการในเครื่อง
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
-
//หากมีคุกกี้รายการอยู่ในเครื่อง เลเยอร์ลอยจะไม่แสดง
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
-
//ปิดโฆษณาและซ่อนเลเยอร์ลอย
$("#closeAd").คลิก(ฟังก์ชั่น(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{หมดอายุ:60});
-
-
//ไลบรารีคุกกี้ jQuery
jQuery.cookie = function(ชื่อ ค่า ตัวเลือก) {
if (typeof value != 'undef') { // ชื่อและค่าที่กำหนด ให้ตั้งค่าคุกกี้
ตัวเลือก = ตัวเลือก ||. {};
ถ้า (ค่า === null) {
ค่า = '';
options.หมดอายุ = -1;
-
var หมดอายุ = '';
ถ้า (options.expires && (ประเภทของ options.expires == 'number' || options.expires.toUTCString)) {
วันที่ต่างกัน;
ถ้า (typeof options.expires == 'หมายเลข') {
วันที่ = วันที่ใหม่ ();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1,000));
} อื่น {
วันที่ = options.หมดอายุ;
-
หมดอายุ = '; หมดอายุ =' + date.toUTCString(); // ใช้แอตทริบิวต์หมดอายุ IE ไม่รองรับอายุสูงสุด
-
var path = options.path ? '; path=' + (options.path) : '';
โดเมน var = options.domain ? ';
var Secure = options.secure ? '; ปลอดภัย' : '';
document.cookie = [ชื่อ, '=', encodeURIComponent (ค่า), หมดอายุ, เส้นทาง, โดเมน, ปลอดภัย] .join ('');
} else { // ให้เฉพาะชื่อเท่านั้น รับคุกกี้
var cookieValue = null;
ถ้า (document.cookie && document.cookie != '') {
คุกกี้ var = document.cookie.split(';');
สำหรับ (var i = 0; i < Cookies.length; i++) {
var cookie = jQuery.trim(คุกกี้[i]);
// สตริงคุกกี้นี้ขึ้นต้นด้วยชื่อที่เราต้องการหรือไม่?
ถ้า (cookie.substring (0, name.length + 1) == (ชื่อ + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
หยุดพัก;
-
-
-
คืนค่าคุกกี้;
-
-
2. ประเภทที่สอง: เขียนตัวอย่าง js ของการใช้งานคุกกี้ด้วยตนเอง
js ที่เกี่ยวข้องมีดังนี้:
$(เอกสาร).ready(function() {
ฟังก์ชั่น writeCookie (ชื่อ, ค่า)
-
var exp = วันที่ใหม่ ();
exp.setTime(exp.getTime() + 7*24*60*60*1000);
document.cookie = ชื่อ + "="+ Escape (ค่า) + ";expires=" + exp.toGMTString();
-
//อ่านคุกกี้
ฟังก์ชั่น readCookie (ชื่อ)
-
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
ถ้า(arr=document.cookie.match(reg)){
กลับ unescape (arr [2]);
}อื่น {
กลับเป็นโมฆะ;
-
-
var adCookie = readCookie("adCookie");
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
-
//หากมีคุกกี้รายการอยู่ในเครื่อง เลเยอร์ลอยจะไม่แสดง
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
-
//ปิดโฆษณาและซ่อนเลเยอร์ลอย
$("#closeAd").คลิก(ฟังก์ชั่น(){
$("#wapDocCookie").hide();
-
-
</pre>
</div>
<!--รูปแบบการโฆษณา-->
<style type="text/css">
เนื้อความ {จัดข้อความ: กึ่งกลาง;}
#wapDocCookie{สีพื้นหลัง:rgba(0,0,0,0.7);พื้นหลัง:#4b4b4b/9;ความกว้าง:100%;text-align:center;position:fixed;padding:10px 0 5px 0;bottom:0 ;ซ้าย:0;}
#bkguancha{พื้นหลัง:url(http://static.hudong.com/35/86/26100000006141138683868789461.png) ไม่ซ้ำ; พื้นหลังขนาด: 280px; พื้นหลัง: url (http://static.hudong.com/50/69/26100000006141138683695381873.png) ไม่ซ้ำ 0 -36px/9;height:46px;width:290px;display:inline-block;overflow:hidden;line-height:99em;}
#closeAd{พื้นหลัง:url(http://static.hudong.com/54/88/26100000006141138683883031718.png) ไม่ทำซ้ำ ;ขนาดพื้นหลัง:12px;พื้นหลัง:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) ไม่ซ้ำ -278px 0/9;ความสูง:12px;ความกว้าง:12px;จอแสดงผล:บล็อก;ตำแหน่ง:สัมบูรณ์;ด้านบน:5px;ขวา:10px;}
<!--โฆษณา js -->
</สไตล์>
<script type="text/javascript" src="http://www.huimg.cn/lib/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(เอกสาร).ready(ฟังก์ชั่น () {
var adCookie=$.cookie("docCookie");
//หากไม่มีคุกกี้ในเครื่อง ให้เขียนคุกกี้รายการในเครื่อง
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
-
//หากมีคุกกี้รายการอยู่ในเครื่อง เลเยอร์ลอยจะไม่แสดง
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
-
//ปิดโฆษณาและซ่อนเลเยอร์ลอย
$("#closeAd").คลิก(ฟังก์ชั่น(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{หมดอายุ:60});
-
-
//ไลบรารีคุกกี้ jQuery
jQuery.cookie = function(ชื่อ ค่า ตัวเลือก) {
if (typeof value != 'undef') { // ชื่อและค่าที่กำหนด ให้ตั้งค่าคุกกี้
ตัวเลือก = ตัวเลือก ||. {};
ถ้า (ค่า === null) {
ค่า = '';
options.หมดอายุ = -1;
-
var หมดอายุ = '';
ถ้า (options.expires && (ประเภทของ options.expires == 'number' || options.expires.toUTCString)) {
วันที่ต่างกัน;
ถ้า (typeof options.expires == 'หมายเลข') {
วันที่ = วันที่ใหม่ ();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1,000));
} อื่น {
วันที่ = options.หมดอายุ;
-
หมดอายุ = '; หมดอายุ =' + date.toUTCString(); // ใช้แอตทริบิวต์หมดอายุ IE ไม่รองรับอายุสูงสุด
-
var path = options.path ? '; path=' + (options.path) : '';
โดเมน var = options.domain ? ';
var Secure = options.secure ? '; ปลอดภัย' : '';
document.cookie = [ชื่อ, '=', encodeURIComponent (ค่า), หมดอายุ, เส้นทาง, โดเมน, ปลอดภัย] .join ('');
} else { // ให้เฉพาะชื่อเท่านั้น รับคุกกี้
var cookieValue = null;
ถ้า (document.cookie && document.cookie != '') {
คุกกี้ var = document.cookie.split(';');
สำหรับ (var i = 0; i < Cookies.length; i++) {
var cookie = jQuery.trim(คุกกี้[i]);
// สตริงคุกกี้นี้ขึ้นต้นด้วยชื่อที่เราต้องการหรือไม่?
ถ้า (cookie.substring (0, name.length + 1) == (ชื่อ + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
หยุดพัก;
-
-
-
คืนค่าคุกกี้;
-
-
</สคริปต์>
<div id="wapDocCookie" style="display: none;">
<a id="bkguancha" href="http://www.baike.com/api.php?m=guancha&a=download" onclick="StatVirtualTraffic(document.referrer,window.location,'stat_hdstat_onclick_survey_wap_doc_foot_download')">คลิก ดาวน์โหลด</a>
<a id="closeAd" href="javascript:void(0)"> </a>
</div>
</ร่างกาย>
</html>