Artikel ini menjelaskan fungsi papan pesan bahwa JS+CSS dapat menampilkan konten tanpa penyegaran. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // h2d xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-transitional.h2d">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<iteme> JS+CSS meniru fungsi papan pesan yang dapat menampilkan konten tanpa refresh </iteme>
<type style = "text/css">
* {padding: 0; Margin: 0; }
Li {List-style: None; }
#parent {width: 600px; margin: 0 otomatis; }
h4 {line-height: 40px; margin-bottom: 10px; Border-Bottom: 1px Solid #333; Warna:#FF3300}
p {lebar: 100%; Latar belakang: #f1f1f1; Posisi: kerabat; margin-bottom: 25px; }
#box {width: 580px; Padding: 25px 10px 0; Perbatasan: 1px solid #ddd; margin-bottom: 10px; }
span {position: absolute; Atas: -20px; Kanan: 0px; }
em {position: relatif; Atas: -13px; }
#text {width: 100%; Tinggi: 90px; meluap: otomatis; }
#btn {lebar: 20%; Tinggi: 50px; }
</tyle>
<type skrip = "Teks/JavaScript">
i = 1;
fungsi fnsubmit ()
{
var odiv = document.getElementById ("box");
var oem = odiv.getElementsbyTagname ("em") [0];
var graphic = document.geteLementById ("text");
var oli = odiv.getElementsbyTagname ("li");
var add_li = document.createElement ("li");
var o_span = document.createElement ("span");
if (etext.value == "")
{
peringatan ("Harap isi konten pesan!");
kembali;
}
oem.style.display = "none";
o_span.style.position = "absolute";
o_span.style.top = "-20px";
o_span.style.right = "20px";
o_span.style.background = "#cccccccc";
add_li.style.position = "relatif";
add_li.index = i;
add_li.style.background = "#cccccccc";
add_li.style.marginbottom = "20px";
var str = document.createTextNode (i+","+etext.value);
var strspan = document.createTextNode ("Konfirmasi untuk menghapus"+i+","+etext.value+"konten?");
add_li.appendchild (o_span);
o_span.style.display = "none";
o_span.appendchild (strspan);
add_li.appendchild (str);
odiv.appendChild (add_li);
i ++;
untuk (j = 0; j <oli.length; 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 = "#cccccccc";
(this.childnodes (o_span)). style.display = "none";
};
Oli [j] .onClick = function ()
{
M--;
odiv.removechild (ini);
if (m <0)
{
oem.style.display = "block";
};
};
};
}
</script>
</head>
<body>
<Div id = "Parent">
<h4> Konten Pesan: </h4>
<div id = "box"> <em> Konten pesan akan ditampilkan di sini ... </em> </div>
<input type = "text" id = "text"> <br />
<input id = "btn" type = "tombol" onclick = "fnsubmit ()" value = "Posting pesan" />
</div>
<br />
</body>
</html>
Efek operasi ditunjukkan pada gambar di bawah ini:
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.