Der Effekt dieses Codes besteht darin, den Titel und den Inhalt einzugeben, auf Veröffentlichung zu klicken, um die Nachricht zu veröffentlichen und die neueste Nachricht immer ganz oben im Inhalt zu erstellen. Der Code ist:
<! DocType html> <html Lang = "en"> <kopf> <meta charset = "utf-8"> <title> Weibo-Nachrichteneffekt </title> <style> *{Margin: 0; Padding: 0;} .Warp {width: 600px; Rand: 50px Auto 0; Hintergrundfarbe: #CCC; } #box {width: 600px; Höhe: 340px; /*Hintergrundfarbe: #ccc;*/ Position: Relativ; /*Überlauf: versteckt;*//*Margin: 50px auto 0;*/ font-familie: 'microsoft yahei'; } #box .span1 {Position: absolut; Schriftgröße: 16px; Zeilenhöhe: 16px; Top: 10px; links: 5px; } #box .span2 {Position: absolut; Schriftgröße: 16px; Zeilenhöhe: 16px; Zeilenhöhe: 16px; Top: 50px; links: 5px; } #title {Position: absolut; Breite: 460px; Höhe: 20px; Zeilenhöhe: 20px; Schriftgröße: 16px; textindent: 5px; links: 70px; Oben: 6px; } #Text {Position: absolut; Breite: 460px; Höhe: 250px; Größenänderung: Keine; Top: 50px; links: 70px; textindent: 5px; Schriftgröße: 16px; } #Box #prompt {Position: Absolute; Top: 312px; links: 340px; } #prompt1 {Position: absolut; Top: 312px; links: 340px; Anzeige: Keine; } #Send {Position: absolut; Höhe: 25px; Breite: 60px; Zeilenhöhe: 20px; Schriftgröße: 16px; Oben: 310px; Rechts: 68px; } #News {Listenstil: Keine; Breite: 490px; Rand: 10px Auto 0px; Padding-Bottom: 5px; } #News li {width: 490px; Schriftgröße: 14px; Überlauf: versteckt; Hintergrundfarbe: #fff; Randboden: 5px; Position: Relativ; } #News li h1 {Schriftgröße: 16px; Zeilenhöhe: 20px; } #News li p {textindent: 5px; klar: links; } #News li span {Position: absolut; Oben: 0px; Rechts: 0px; Cursor: Zeiger; } #News span: hover {color: rot; " id = "prompt1"> Sie haben <var id = "textnum1"> </var> word </em> <button id = "send"> senden </button> </div> <ul id = "news"> <li> <h1> </h1> <span> </span> <p> </p> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </ul> </divicl. var text = document.getElementById ('text'); var send = document.getElementById ('send'); var ul = document.getElementById ('news'); var lis = ul.getElementsByTagName ('li'); var prompt = document.getElementById ('Eingabeaufforderung'); var forder1 = document.getElementById ('prompt1'); var textnum = document.getElementById ('Textnum'); var textnum1 = document.getElementById ('Textnum1'); var timer1 = null, timer2 = null; send.onclick = function () {if (text.Value == '' || title.value == '') {alert ('Pro ~ Titel oder Inhalt kann nicht leer sein'); false zurückgeben; } 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+= ändere; lis [1] .style.Height = x+'px';}, 10) title.Value = ''; text.Value = ''; var close = document.getElementById ('close'); für (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- = ändere; }}} text.onfocus = function () {// console.log (forder.Children [0] .innerhtml); // Kinder beziehen sich auf einen Kinderknoten mit einem Tag; timer2=setInterval(function(){ if(text.value.length<190){ var num=200-text.value.length; textnum.style.color='black'; // prompt.style.color='black'; textnum.innerHTML=num;// // prompt.innerHTML='You can also enter <var id = "textnum"> '+num+' </var> '; Eingabeaufforderung. fordert1.Style.Display = 'Block'; } </script> </body> </html>Dieser Code verwendet hauptsächlich ein gewisses Wissen über den DOM -Knoten -Betrieb, was beim Lernen nur eine Arbeit zum Üben ist. Sie können sich darauf beziehen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.