Kasus berikut menggunakan js untuk mengimplementasikan efek lapisan mengambang halaman, dan menggunakan js untuk membaca dan menulis cookie melalui dua metode untuk mencapai status tampilan pengguna mematikan iklan;
Pembaca dapat menyalin kode berikut ke file html untuk mencoba efeknya; tag awal html memiliki dua metode implementasi js
Copy kode kodenya sebagai berikut:
<!DOCTYPE HTML>
<html>
<kepala>
<meta content="text/html;charset=utf-8" http-equiv="Jenis Konten"/>
<meta content="Yang Kai" name="deskripsi"/>
<meta name="penulis" content="http://blog.csdn.net/tianyazaiheruan"/>
<meta name="hak cipta" content="Hak Cipta oleh Yang Kai"/>
<title>IT_Blog_Yang Kai</title>
</kepala>
<tubuh>
<div>
Penulis artikel ini: IT_Blog_Yang Kai
Harap sebutkan sumbernya saat mencetak ulang: <a href=”http://blog.csdn.net/yangkai_hudong”>http://blog.csdn.net/yangkai_hudong</a>
</div>
<br>
<div>
<pra>
1. Yang pertama: menggunakan perpustakaan cookie jQuery
Contohnya adalah js yang sedang digunakan. Kode yang relevan adalah sebagai berikut:
$(dokumen).siap(fungsi () {
var adCookie=$.cookie("docCookie");
//Jika tidak ada cookie secara lokal, tulis entri cookie secara lokal
if(adCookie!="adDocCookie"){
$("#wapDocCookie").tampilkan();
}
//Jika cookie entri ada secara lokal, lapisan mengambang tidak akan ditampilkan.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").sembunyikan();
}
//Tutup iklan dan sembunyikan lapisan mengambang
$("#closeAd").klik(fungsi(){
$("#wapDocCookie").sembunyikan();
$.cookie("docCookie","adDocCookie",{kedaluwarsa:60});
});
});
//perpustakaan kue jQuery
jQuery.cookie = fungsi(nama, nilai, opsi) {
if (typeof value != 'undefinisi') {// nama dan nilai yang diberikan, setel cookie
pilihan = pilihan ||. {};
jika (nilai === nol) {
nilai = '';
pilihan.kedaluwarsa = -1;
}
var kadaluarsa = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
tanggal var;
if (typeof options.expires == 'angka') {
tanggal = Tanggal baru();
tanggal.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} kalau tidak {
tanggal = opsi.kedaluwarsa;
}
expired = '; expired=' + date.toUTCString(); // gunakan atribut expired, max-age tidak didukung oleh IE
}
var jalur = opsi.jalur ? '; jalur=' + (pilihan.jalur) : '';
var domain = opsi.domain ? ';
var aman = opsi.aman ? '; aman' : '';
document.cookie = [nama, '=', encodeURIComponent(nilai), kedaluwarsa, jalur, domain, aman].join('');
} else { // hanya nama yang diberikan, dapatkan cookie
var nilai cookie = nol;
if (dokumen.cookie && dokumen.cookie != '') {
var cookie = dokumen.cookie.split(';');
for (var i = 0; i < cookie.panjang; i++) {
var cookie = jQuery.trim(cookie[i]);
// Apakah string cookie ini diawali dengan nama yang kita inginkan?
if (cookie.substring(0, nama.panjang + 1) == (nama + '=')) {
cookieValue = decodeURIComponent(cookie.substring(nama.panjang + 1));
merusak;
}
}
}
kembalikan nilai cookie;
}
};
2. Tipe kedua: tulis sendiri contoh js pengoperasian cookie
Js yang relevan adalah sebagai berikut:
$(dokumen).siap(fungsi() {
fungsi writeCookie (nama, nilai)
{
var exp = Tanggal baru();
exp.setTime(exp.getTime() + 7*24*60*60*1000);
document.cookie = nama + "="+ escape (nilai) + ";expires=" + exp.toGMTString();
}
//Baca cookie
fungsi readCookie (nama)
{
var arr,reg=regExp baru("(^| )"+nama+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
kembali unescape(arr[2]);
}kalau tidak {
kembalikan nol;
}
}
var adCookie = readCookie("adCookie");
if(adCookie!="adDocCookie"){
$("#wapDocCookie").tampilkan();
}
//Jika cookie entri ada secara lokal, lapisan mengambang tidak akan ditampilkan.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").sembunyikan();
}
//Tutup iklan dan sembunyikan lapisan mengambang
$("#closeAd").klik(fungsi(){
$("#wapDocCookie").sembunyikan();
});
});
</pra>
</div>
<!--Gaya periklanan-->
<gaya tipe="teks/css">
body {TEXT-ALIGN: tengah;}
#wapDocCookie{background-color:rgba(0,0,0,0.7);background:#4b4b4b/9;width:100%;text-align:center;position:fixed;padding:10px 0 5px 0;bottom:0 ;kiri:0;}
#bkguancha{latar belakang:url(http://static.hudong.com/35/86/26100000006141138683868789461.png) tidak ada pengulangan;ukuran latar belakang:280px;latar belakang:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) tidak ada pengulangan 0 -36px/9;height:46px;width:290px;display:inline-block;overflow:hidden;line-height:99em;}
#closeAd{background:url(http://static.hudong.com/54/88/26100000006141138683883031718.png) tanpa pengulangan ;ukuran latar belakang:12px;latar belakang:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) tanpa pengulangan -278px 0/9;tinggi:12px;lebar:12px;tampilan:blok;posisi:mutlak;atas:5px;kanan:10px;}
<!--Periklanan js -->
</gaya>
<skrip type="text/javascript" src="http://www.huimg.cn/lib/jquery-1.3.2.js"></script>
<skrip tipe="teks/javascript">
$(dokumen).siap(fungsi () {
var adCookie=$.cookie("docCookie");
//Jika tidak ada cookie secara lokal, tulis entri cookie secara lokal
if(adCookie!="adDocCookie"){
$("#wapDocCookie").tampilkan();
}
//Jika cookie entri ada secara lokal, lapisan mengambang tidak akan ditampilkan.
if(adCookie=="adDocCookie"){
$("#wapDocCookie").sembunyikan();
}
//Tutup iklan dan sembunyikan lapisan mengambang
$("#closeAd").klik(fungsi(){
$("#wapDocCookie").sembunyikan();
$.cookie("docCookie","adDocCookie",{kedaluwarsa:60});
});
});
//perpustakaan kue jQuery
jQuery.cookie = fungsi(nama, nilai, opsi) {
if (typeof value != 'undefinisi') {// nama dan nilai yang diberikan, setel cookie
pilihan = pilihan ||. {};
jika (nilai === nol) {
nilai = '';
pilihan.kedaluwarsa = -1;
}
var kadaluarsa = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
tanggal var;
if (typeof options.expires == 'angka') {
tanggal = Tanggal baru();
tanggal.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} kalau tidak {
tanggal = opsi.kedaluwarsa;
}
expired = '; expired=' + date.toUTCString(); // gunakan atribut expired, max-age tidak didukung oleh IE
}
var jalur = opsi.jalur ? '; jalur=' + (pilihan.jalur) : '';
var domain = opsi.domain ? ';
var aman = opsi.aman ? '; aman' : '';
document.cookie = [nama, '=', encodeURIComponent(nilai), kedaluwarsa, jalur, domain, aman].join('');
} else { // hanya nama yang diberikan, dapatkan cookie
var nilai cookie = nol;
if (dokumen.cookie && dokumen.cookie != '') {
var cookie = dokumen.cookie.split(';');
for (var i = 0; i < cookie.panjang; i++) {
var cookie = jQuery.trim(cookie[i]);
// Apakah string cookie ini diawali dengan nama yang kita inginkan?
if (cookie.substring(0, nama.panjang + 1) == (nama + '=')) {
cookieValue = decodeURIComponent(cookie.substring(nama.panjang + 1));
merusak;
}
}
}
kembalikan nilai cookie;
}
};
</skrip>
<div id="wapDocCookie" style="display: tidak ada;">
<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')">Klik Unduh</a>
<a id="closeAd" href="javascript:void(0)"> </a>
</div>
</tubuh>
</html>