Este artigo descreve a função da placa de mensagem que JS+CSS pode exibir conteúdo sem atualização. Compartilhe para sua referência. O método de implementação específico é o seguinte:
Copie o código da seguinte forma: <!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> JS+CSS emula a função da placa de mensagem que pode exibir conteúdo sem atualizar </title>
<style type = "text/css">
* {preenchimento: 0; margem: 0; }
li {estilo de lista: nenhum; }
#parent {width: 600px; margem: 0 automático; }
H4 {altura da linha: 40px; Margin-Bottom: 10px; fundo de borda: 1px Solid #333; Cor:#ff3300}
p {largura: 100%; Antecedentes: #f1f1f1; Posição: relativa; Margin-Bottom: 25px; }
#Box {Width: 580px; preenchimento: 25px 10px 0; Fronteira: 1px sólido #DDD; Margin-Bottom: 10px; }
span {posição: absoluto; topo: -20px; Direita: 0px; }
em {posição: relativa; topo: -13px; }
#Text {Width: 100%; Altura: 90px; Overflow: Auto; }
#btn {width: 20%; Altura: 50px; }
</style>
<script type = "text/javascript">
i = 1;
função fnSubMit ()
{
var odiv = document.getElementById ("caixa");
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 == "")
{
alerta ("Por favor, preencha o conteúdo da mensagem!");
retornar;
}
oem.style.display = "nenhum";
o_span.style.Position = "Absolute";
o_span.style.top = "-20px";
o_span.style.right = "20px";
o_span.style.background = "#cccccccc";
add_li.style.Position = "relativo";
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 ("Confirme para excluir"+i+","+etext.value+"content?");
add_li.appendChild (o_span);
o_span.style.display = "nenhum";
o_span.appendChild (strspan);
add_li.appendChild (str);
odiv.appendChild (add_li);
i ++;
for (j = 0; j <oli.length; j ++)
{
var m = j;
oli [j] .onMouseOver = function ()
{
this.style.background = "#ffff00";
(this.childnodes (o_span)). style.display = "bloco";
};
oli [j] .onMouseOut = function ()
{
this.style.background = "#ccccccccc";
(this.childnodes (o_span)). style.display = "nenhum";
};
oli [j] .OnClick = function ()
{
m--;
odiv.removechild (isto);
if (m <0)
{
oem.style.display = "bloco";
};
};
};
}
</script>
</head>
<Body>
<div id = "pai">
<H4> Conteúdo da mensagem: </h4>
<div id = "caixa"> <em> O conteúdo da mensagem será exibido aqui ... </em> </div>
<input type = "text" id = "text"> <r />
<input id = "btn" type = "button" onclick = "fnSubMit ()" value = "poste uma mensagem" />
</div>
<br />
</body>
</html>
O efeito de operação é mostrado na figura abaixo:
Espero que este artigo seja útil para a programação JavaScript de todos.