Dieser Artikel beschreibt die Message Board -Funktion, die JS+CSS ohne Aktualisierung anzeigen kann. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // h2d xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-transitional.h2d">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<titels> JS+CSS emuliert die Message Board -Funktion, mit der Inhalte ohne Aktualisieren </title> angezeigt werden können
<style type = "text/css">
* {Padding: 0; Rand: 0; }
li {Listenstil: Keine; }
#parent {width: 600px; Rand: 0 Auto; }
H4 {Zeilenhöhe: 40px; Randboden: 10px; Grenzboden: 1PX Solid #333; Farbe:#ff3300}
P {Breite: 100%; Hintergrund: #f1f1f1; Position: Relativ; Randboden: 25px; }
#box {width: 580px; Polsterung: 25px 10px 0; Grenze: 1PX Solid #ddd; Randboden: 10px; }
Span {Position: absolut; Oben: -20px; Rechts: 0px; }
em {Position: Relativ; Oben: -13px; }
#Text {Breite: 100%; Höhe: 90px; Überlauf: Auto; }
#BTN {Breite: 20%; Höhe: 50px; }
</style>
<script type = "text/javaScript">
i = 1;
Funktion 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 == "")
{
Alert ("Bitte füllen Sie den Nachrichteninhalt aus!");
zurückkehren;
}
oem.style.display = "Keine";
o_span.style.position = "Absolute";
o_span.style.top = "-20px";
o_span.style.right = "20px";
o_span.style.background = "#cccccccc";
add_li.style.position = "relativ";
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 ("Bestätigen Sie zu löschen"+i+","+ETEXT.Value+"Inhalt?");
add_li.appendchild (o_span);
o_span.style.display = "Keine";
o_span.Appendchild (strspan);
add_li.appendchild (str);
Odiv.AppendChild (add_li);
i ++;
für (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 (this);
if (m <0)
{
Oem.Style.Display = "Block";
};
};
};
}
</script>
</head>
<body>
<div id = "parent">
<h4> Nachrichteninhalt: </h4>
<div id = "box"> <em> Der Nachrichteninhalt wird hier angezeigt ... </em> </div>
<Eingabe type = "text" id = "text"> <br />
<input id = "btn" type = "button" onclick = "fnsubmit ()" value = "post eine meldung" />
</div>
<br />
</body>
</html>
Der Betriebseffekt ist in der folgenden Abbildung dargestellt:
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.