JS CSS mensimulasikan contoh papan mesej yang boleh memaparkan kandungan tanpa kemahiran refreshing_javascript

Contoh dalam artikel ini menerangkan fungsi papan mesej simulasi JS CSS yang boleh memaparkan kandungan tanpa memuat semula. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut: JS CSS mensimulasikan fungsi papan mesej yang boleh memaparkan kandungan tanpa menyegarkan * { pelapik: 0; li { gaya senarai: tiada } #induk { lebar: 600px; h4 { garis-ketinggian: 40px; jidar-bawah: 1px padat #333; p { lebar: 100%; latar belakang: #f1f1f1; #kotak { lebar: 580px; padding: 25px 10px 0; span { position: absolute; atas: -20px; em { kedudukan: relatif; atas: -13px; #teks { lebar: 100%; tinggi: 90px; #btn { lebar: 20%; tinggi: } i=1; fungsi fnsubmit() { var odiv=document.getElementById("kotak"); var oem=odiv.getElementsByTagName("em")[0]; var otext=document.getElementById("text"); var oli=odiv.getElementsByTagName("li"); var add_li=document.createElement("li"); var o_span=document.createElement("span"); if(otext.value=="") { alert("Sila isi kandungan mesej!"); kembali; } oem.style.display="none"; o_span.style.position="absolute"; o_span.style.top="-20px"; o_span.style.right="20px"; o_span.style.background="#cccccc"; add_li.style.position="relative"; add_li.index=i; add_li.style.background="#cccccc"; add_li.style.marginBottom="20px"; var str=document.createTextNode(i "," otext.value); var strspan=document.createTextNode("Adakah anda pasti memadam kandungan " i ", " otext.value "?"); add_li.appendChild(o_span); o_span.style.display="none"; o_span.appendChild(strspan); add_li.appendChild(str); odiv.appendChild(add_li); saya ; untuk(j=0;j { var m=j; oli[j].onmouseover=function() { this.style.background="#ffff00"; (this.childNodes(o_span)).style.display="block";

}; oli[j].onmouseout=function() { this.style.background="#cccccc"; (this.childNodes(o_span)).style.display="none"; }; oli[j].onclick=function()

{ m--; odiv.removeChild(ini); jika(m { oem.style.display="block"; }; }; }; } Kandungan mesej: Kandungan mesej akan dipaparkan di sini...

Kesan operasi adalah seperti yang ditunjukkan di bawah:

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.