Este artículo describe la función del tablero de mensajes que JS+CSS puede mostrar contenido sin actualizar. Compártelo para su referencia. El método de implementación específico es el siguiente:
Copie el código de lo siguiente: <
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> JS+CSS emula la función del tablero de mensajes que puede mostrar contenido sin actualizar </title>
<style type = "text/css">
* {relleno: 0; margen: 0; }
li {list-style: none; }
#parent {ancho: 600px; margen: 0 auto; }
H4 {Línea-aguja: 40px; margen-fondo: 10px; Border-Bottom: 1px Solid #333; Color:#FF3300}
p {ancho: 100%; Antecedentes: #F1F1F1; Posición: relativo; margen de fondo: 25px; }
#box {ancho: 580px; relleno: 25px 10px 0; borde: 1px sólido #ddd; margen-fondo: 10px; }
span {posición: absoluto; arriba: -20px; Derecha: 0px; }
em {posición: relativo; arriba: -13px; }
#Text {ancho: 100%; Altura: 90px; desbordamiento: auto; }
#btn {ancho: 20%; Altura: 50px; }
</style>
<script type = "text/javaScript">
i = 1;
función fnsubmit ()
{
var odiv = document.getElementById ("box");
var oem = odiv.getElementsBytagName ("em") [0];
var gráfico = document.getElementById ("texto");
var oli = odiv.getElementsBytagName ("li");
var add_li = document.createElement ("li");
var o_span = document.createElement ("span");
if (etext.value == "")
{
alerta ("¡Complete el contenido del mensaje!");
devolver;
}
oem.style.display = "Ninguno";
o_span.style.position = "Absolute";
o_span.style.top = "-20px";
o_span.style.right = "20px";
o_span.style.background = "#ccccccccc";
add_li.style.position = "relativo";
add_li.index = i;
add_li.style.background = "#ccccccccc";
add_li.style.MarginBottom = "20px";
var str = document.createTextNode (i+","+etext.value);
var strspan = document.createTextNode ("confirmar para eliminar"+i+","+etext.value+"contenido?");
add_li.appendChild (o_span);
o_span.style.display = "Ninguno";
o_span.appendChild (strspan);
add_li.appendChild (str);
odiv.appendchild (add_li);
i ++;
para (j = 0; j <oli.length; j ++)
{
var m = j;
oli [j] .onmouseover = function ()
{
this.style.background = "#ffff00";
(this.childNodes (o_span)). style.display = "bloque";
};
oli [j] .onmouseout = function ()
{
this.style.background = "#ccccccccc";
(this.childnodes (o_span)). style.display = "none";
};
oli [j] .onclick = function ()
{
metro--;
odiv.removechild (esto);
if (m <0)
{
oem.style.display = "bloque";
};
};
};
}
</script>
</ablo>
<Body>
<div id = "parent">
<h4> Contenido de mensaje: </h4>
<div id = "box"> <em> El contenido del mensaje se mostrará aquí ... </em> </div>
<input type = "text" id = "text"> <br />
<input id = "btn" type = "button" onClick = "fnsubmit ()" value = "publicar un mensaje" />
</div>
<Br />
</body>
</html>
El efecto de operación se muestra en la figura a continuación:
Espero que este artículo sea útil para la programación de JavaScript de todos.