L'effet de ce code est d'entrer le titre et le contenu, cliquez sur Publier pour publier le message et faire toujours le dernier message en haut du contenu. Le code est:
<! Doctype html> <html lang = "en"> <éadf> <meta charset = "utf-8"> <ititle> effect de message weibo </title> <style> * {margin: 0; padding: 0;} .warp {width: 600px; marge: 50px auto 0; Color d'arrière-plan: #ccc; } #box {width: 600px; hauteur: 340px; / * Background-Color: #ccc; * / position: relatif; / * Overflow: Hidden; * / / * marge: 50px Auto 0; * / Font-Family: 'Microsoft Yahei'; } #box .span1 {position: absolue; taille de police: 16px; Heure de ligne: 16px; En haut: 10px; Gauche: 5px; } #box .span2 {position: absolue; taille de police: 16px; Heure de ligne: 16px; Heure de ligne: 16px; en haut: 50px; Gauche: 5px; } #Title {position: absolue; Largeur: 460px; hauteur: 20px; hauteur de ligne: 20px; taille de police: 16px; Texte-indent: 5px; Gauche: 70px; En haut: 6px; } #Text {position: absolue; Largeur: 460px; hauteur: 250px; redimensionner: aucun; en haut: 50px; Gauche: 70px; Texte-indent: 5px; taille de police: 16px; } #box #prompt {position: absolue; En haut: 312px; Gauche: 340px; } # prompt1 {position: absolue; En haut: 312px; Gauche: 340px; Affichage: aucun; } #Send {position: absolue; hauteur: 25px; Largeur: 60px; hauteur de ligne: 20px; taille de police: 16px; En haut: 310px; À droite: 68px; } #news {list-style: Aucun; Largeur: 490px; marge: 10px Auto 0px; Padding-Bottom: 5px; } #news li {largeur: 490px; taille de police: 14px; débordement: caché; Color d'arrière-plan: #FFF; marge-fond: 5px; Position: relative; } #news li H1 {Font-Size: 16px; hauteur de ligne: 20px; } #news li p {text-indent: 5px; Clear: à gauche; } #news li span {position: absolu; En haut: 0px; Droite: 0px; curseur: pointeur; } #News Span: Hover {Color: Red; } </ style> </ head> <body> <div> <div id = "box"> <span class = 'span1'> title: </span> <input id = "title" type = "text"> <span> contenu: </ span> <textarea id = "text"> </ textarea> <em id = "prompt"> Vous pouvez également entrer <var id = "textNum"> 200 < id = "inside1"> Vous avez dépassé <var id = "textNum1"> </ var> word </em> <Button id = "Send"> Envoyer </ Button> </ div> <ul Id = "News"> <li> <h1> </h1> <span> </span> <p> </p> </li> </ul> </v> <prict> var title = document.getElementyd ("Title '); var text = document.getElementById ('text'); var send = document.getElementById ('send'); var ul = document.getElementById ('news'); var lis = ul.getElementsByTagName ('li'); var invite = document.getElementById ('invite'); var prompt1 = document.getElementById ('prompt1'); var textNum = document.getElementById ('textNum'); var textNum1 = document.getElementById ('textNum1'); var timer1 = null, tempor2 = null; send.onclick = function () {if (text.value == '' || title.value == '') {alert ('pro ~ title ou contenu ne peut pas être vide'); retourne false; } lis [0] .Innerhtml = '<h1>' + title.value + '</h1> <span> × </span> <p>' + text.value + '</p>'; lis [0] .children [1] .setAttribute ('id', 'close'); var newli = document.CreateElement ('li'); ul.insertbefore (newli, lis [0]); MaxHeight = lis [1] .clientHeight; lis [1] .style.height = 0 + 'px'; var x = 0; var minstep = 0; var maxstep = 20; var change = maxheight / maxstep; ClearInterval (Timer1); timer1 = setInterval (function () {minstep ++; if (minstep> = maxstep) {ClearInterval (TIMER1);} x + = changement; lis [1] .style.height = x + 'px';}, 10) title.value = ''; text.value = ''; var close = document.getElementById ('close'); for (var i = 0; i <lis.length; i ++) {close.onclick = function () {var isme = this.parentNode; var x = this.parentNode.ClientHeight; var minstep = 0; var maxstep = 20; var change = x / maxstep; ClearInterval (Timer1); TIMER1 = setInterval (function () {Minstep ++; if (Minstep> = maxstep) {ClearInterval (Timer1); ul.removechild (isme);} x- = changement; isme.style.height = x + 'px';}, 10) // ul.removechild (lis [i]); // no, ne sais que l'on ne connaît. }}} text.onfocus = function () {// console.log (prompt.children [0] .InnerHtml); // Les enfants se réfèrent à un nœud enfant avec une balise; timer2 = setInterval (function () {if (text.value.length <190) {var num = 200-text.value.length; textnum.style.color = 'noir'; // prompt.style.color = 'noir'; textnum.innerhtml = num; // prompt.innerhtml = 'vous pouvez également entrer <var; id = "textNum"> '+ num +' </ var> '; invite.innerhtml = 'vous pouvez également entrer <var id = "textNum">' + num + '</var>'; Prompt1.style.display = 'Block'; } </ script> </ body> </html>Ce code utilise principalement une certaine connaissance du fonctionnement du nœud DOM, qui est purement un travail pour pratiquer lors de l'apprentissage. Vous pouvez vous y référer.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.