El efecto de este código es ingresar el título y el contenido, hacer clic en Publicar para publicar el mensaje y hacer el último mensaje siempre en la parte superior del contenido. El código es:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> weibo Mensaje Effect </title> <style> *{margin: 0; relleno: 0;} .warp {ancho: 600px; Margen: 50px Auto 0; Color de fondo: #CCC; } #box {ancho: 600px; Altura: 340px; /*Color de fondo: #ccc;*/ Position: relativo; /*desbordamiento: Hidden;*//*Margen: 50px Auto 0;*/ Font-Family: 'Microsoft Yahei'; } #box .span1 {posición: absoluto; tamaño de fuente: 16px; Línea de altura: 16px; arriba: 10px; Izquierda: 5px; } #box .span2 {posición: absoluto; tamaño de fuente: 16px; Línea de altura: 16px; Línea de altura: 16px; Arriba: 50px; Izquierda: 5px; } #title {posición: absoluto; Ancho: 460px; Altura: 20px; Línea de altura: 20px; tamaño de fuente: 16px; Text-Indent: 5px; Izquierda: 70px; Arriba: 6px; } #Text {posición: absoluto; Ancho: 460px; Altura: 250px; cambiar el tamaño: ninguno; Arriba: 50px; Izquierda: 70px; Text-Indent: 5px; tamaño de fuente: 16px; } #box #prompt {posición: absoluto; Arriba: 312px; Izquierda: 340px; } #apropado1 {posición: absoluto; Arriba: 312px; Izquierda: 340px; Pantalla: ninguno; } #send {posición: absoluto; Altura: 25px; Ancho: 60px; Línea de altura: 20px; tamaño de fuente: 16px; Arriba: 310px; Derecha: 68px; } #News {list-style: none; Ancho: 490px; Margen: 10px Auto 0px; Botón de relleno: 5px; } #News Li {ancho: 490px; tamaño de fuente: 14px; desbordamiento: oculto; Color de fondo: #fff; margen de fondo: 5px; Posición: relativo; } #News Li H1 {Font-size: 16px; Línea de altura: 20px; } #News Li P {text-indent: 5px; claro: izquierda; } #News Li Span {posición: Absolute; arriba: 0px; Derecha: 0px; cursor: puntero; } #News Span: Hover {color: rojo; } </ystye> </head> <body> <viv> <div id = "box"> <span class = 'span1'> title: </span> <input id = "title" type = "text"> <span> content: </span> <textarea id = "text"> </textarea> <em id = "indicador"> también puede ingresar <var id = "textnum" id = "indic1"> ha excedido <var id = "textNum1"> </ar var> word </em> <button id = "enviar"> enviar </botón> </div> <ul id = "news"> <li> <h1> </h1> var text = document.getElementById ('text'); var send = document.getElementById ('enviar'); var ul = document.getElementById ('News'); var lis = ul.getElementsBytagName ('li'); var indic = document.getElementById ('solic'); var indic1 = document.getElementById ('apropa1'); 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 ~ title o content no puede estar vacío'); devolver falso; } lis [0] .innerhtml = '<h1>'+title.value+'</h1> <span> × </span> <p>'+text.value+'</p>'; lis [0] .Children [1] .SetAttribute ('id', 'cerrar'); 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 cambio = maxHeight/maxstep; ClearInterval (temporizador1); timer1 = setInterval (function () {minstep ++; if (minStep> = maxstep) {clearVal (timer1);} x+= cambio; lis [1] .style.height = x+'px';}, 10) title.value = ''; text.value = ''; var cerrar = 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 cambio = x/maxstep; ClearInterval (temporizador1); timer1 = setInterval (function () {minstep ++; if (minstep> = maxstep) {clearinterval (timer1); ul.removechild (isMe);} x- = cambio; isme.style.height = x+'px';}, 10) // ul.removechild (lis [i]);//no. }}} text.Onfocus = function () {// console.log (apropado timer2 = setInterval (function () {if (text.value.length <190) {var num = 200-text.value.length; textnum.style.color = 'black'; // aproped.style.color = 'black'; textnum.innerhtml = num; // // apurido id = "textNum"> '+num+' </arr> '; indicador. indicador1.Style.Display = 'Bloque'; } </script> </body> </html>Este código utiliza principalmente algún conocimiento de la operación del nodo DOM, que es puramente un trabajo para practicar mientras aprende. Puedes referirte a él.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.