O efeito deste código é inserir o título e o conteúdo, clique em Publicar para publicar a mensagem e fazer a mensagem mais recente sempre na parte superior do conteúdo. O código é:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> Efeito da mensagem weibo </title> <style> *{margin: 0; preenchimento: 0;} .warp {width: 600px; margem: 50px automático 0; Background-Color: #CCC; } #Box {Width: 600px; Altura: 340px; /*cor de fundo: #ccc;*/ posição: relativa; /*Overflow: Hidden;*//*Margem: 50px AUTO 0;*/ FONT-Family: 'Microsoft yahei'; } #Box .span1 {Posição: Absolute; Size da fonte: 16px; altura da linha: 16px; topo: 10px; Esquerda: 5px; } #box .span2 {posição: absoluto; Size da fonte: 16px; altura da linha: 16px; altura da linha: 16px; Top: 50px; Esquerda: 5px; } #title {Position: Absolute; Largura: 460px; Altura: 20px; altura de linha: 20px; Size da fonte: 16px; Indente de texto: 5px; Esquerda: 70px; topo: 6px; } #Text {Position: Absolute; Largura: 460px; Altura: 250px; redimensionar: nenhum; Top: 50px; Esquerda: 70px; Indente de texto: 5px; Size da fonte: 16px; } #Box #Prompt {Position: Absolute; TOP: 312px; Esquerda: 340px; } #prompt1 {posição: absoluto; TOP: 312px; Esquerda: 340px; Exibir: Nenhum; } #send {posição: absoluto; Altura: 25px; Largura: 60px; altura de linha: 20px; Size da fonte: 16px; TOP: 310px; Direita: 68px; } #News {estilo de lista: nenhum; Largura: 490px; margem: 10px Auto 0px; Botting-Bottom: 5px; } #News Li {Width: 490px; Size da fonte: 14px; estouro: oculto; Background-Color: #FFF; Bottom de margem: 5px; Posição: relativa; } #News Li H1 {font-size: 16px; altura de linha: 20px; } #News Li p {text-indent: 5px; claro: esquerda; } #News Li span {Posição: Absolute; Top: 0px; Direita: 0px; Cursor: Ponteiro; } #news span: hover {color: vermelho; } </style> </ad Head> <body> <div> <div id = "box"> <span class = 'span1'> título: </span> <input id = "title" type = "text"> <pan> content: </span> <textacea id = "text"> </textarea> <em = ""> você pode também entrar <arbAd id = "text"> </textarea> <em = ""> id = "Prompt1"> você excedeu <var id = "textnum1"> </var> word </em> <button id = "send"> send </button> </div> <l id = "news"> <li> <h1> </h1> </span> </span> </p> <li> var text = document.getElementById ('text'); var send = document.getElementById ('send'); var ul = document.getElementById ('News'); var lis = ul.getElementsByTagName ('li'); var prompt = document.getElementById ('prompt'); var prompt1 = document.getElementById ('prompt1'); var textNum = document.getElementById ('textnum'); var textNum1 = document.getElementById ('textNum1'); var timer1 = nulo, timer2 = null; send.OnClick = function () {if (text.value == '' || title.value == '') {alert ('pro ~ title ou conteúdo não pode estar vazio'); retornar falso; } 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 alteração = maxHeight/maxstep; ClearInterval (Timer1); timer1 = setInterval (function () {minstep ++; if (minstep> = maxStep) {clearInterval (timer1);} x+= alteração; 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 alteração = x/maxstep; ClearInterval (Timer1); timer1 = setInterval (function () {minstep ++; if (minstep> = maxStep) {clearInterval (timer1); ul.removechild (isme);} x- = alteração; iSMe.style.Height = x+'px';}, 10) // ul.lemovechil }}} text.onfocus = function () {// console.log (prompt.children [0] .innerhtml); // crianças refere -se a um nó filho com uma 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> '; Prompt.innerhtml = 'Você também pode inserir <var id = "textnum">'+num+'</s prompt1.style.display = 'bloco'; } </script> </body> </html>Esse código usa principalmente algum conhecimento da operação do nó DOM, que é puramente um trabalho para praticar durante o aprendizado. Você pode se referir a ele.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.