Cet article décrit la fonction du babillard de messages que JS + CSS peut afficher le contenu sans actualiser. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
Copiez le code comme suit: <! 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">
<adal>
<Title> JS + CSS émule la fonction du babillard de message qui peut afficher le contenu sans actualiser </Title>
<style type = "text / css">
* {rembourrage: 0; marge: 0; }
li {list-style: aucun; }
#parent {width: 600px; marge: 0 auto; }
h4 {line-height: 40px; marge-fond: 10px; Border-Bottom: 1px solide # 333; Couleur: # FF3300}
P {Largeur: 100%; Contexte: # f1f1f1; Position: relative; marge-fond: 25px; }
#box {largeur: 580px; rembourrage: 25px 10px 0; Border: 1px solide #ddd; marge-fond: 10px; }
Span {Position: Absolute; En haut: -20px; Droite: 0px; }
Em {position: relative; En haut: -13px; }
#Text {largeur: 100%; hauteur: 90px; débordement: auto; }
#btn {largeur: 20%; hauteur: 50px; }
</ style>
<script type = "text / javascript">
i = 1;
fonction fnsubmit ()
{
var odiv = document.getElementById ("box");
var oem = odiv.getElementsByTAGName ("em") [0];
var graphic = document.getElementById ("texte");
var oli = odiv.getElementsByTagName ("li");
var add_li = document.createElement ("li");
var o_span = document.CreateElement ("Span");
if (etext.value == "")
{
alert ("Veuillez remplir le contenu du message!");
retour;
}
oem.style.display = "aucun";
o_span.style.position = "absolu";
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 strpan = document.createTextNode ("Confirmer à Supprimer" + i + "," + etext.value + "Content?");
add_li.appendChild (o_span);
o_span.style.display = "Aucun";
o_span.appendChild (strspan);
add_li.appendChild (str);
odiv.appendChild (add_li);
i ++;
pour (j = 0; j <oli.length; j ++)
{
var m = j;
oli [j] .onMouseOver = function ()
{
this.style.background = "# ffff00";
(this.childNodes (o_span)). style.display = "bloc";
};
oli [j] .onMouseout = function ()
{
this.style.background = "# cccccccc";
(this.childNodes (o_span)). style.display = "aucun";
};
oli [j] .onclick = function ()
{
M--;
odiv.removechild (this);
if (m <0)
{
oem.style.display = "bloc";
};
};
};
}
</cript>
</ head>
<body>
<div id = "parent">
<h4> Contenu du message: </h4>
<div id = "box"> <em> Le contenu du message sera affiché ici ... </em> </div>
<input type = "text" id = "text"> <br />
<input id = "btn" type = "bouton" onclick = "fnsubmit ()" value = "publier un message" />
</div>
<br />
</docy>
</html>
L'effet de fonctionnement est illustré dans la figure ci-dessous:
J'espère que cet article sera utile à la programmation JavaScript de tous.