Эффект этого кода состоит в том, чтобы ввести заголовок и контент, нажмите «Опубликовать», чтобы опубликовать сообщение и сделать последнее сообщение всегда в верхней части контента. Код:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> эффект сообщения Weibo </title> <style> *{Margin: 0; Padding: 0;} .warp {ширина: 600px; Маржа: 50px Auto 0; фоновый цвет: #CCC; } #box {width: 600px; Высота: 340px; /*фоновое цветное: #ccc;*/ position: относительно; /*переполнение: скрыто;*//*Маржа: 50px auto 0;*/ font-family: 'Microsoft Yahei'; } #box .span1 {position: Absolute; размер шрифта: 16px; высота линии: 16px; Верх: 10px; Слева: 5px; } #box .span2 {position: Absolute; размер шрифта: 16px; высота линии: 16px; высота линии: 16px; Верх: 50px; Слева: 5px; } #title {position: Absolute; Ширина: 460px; Высота: 20px; высота линии: 20px; размер шрифта: 16px; Текст-интент: 5px; Слева: 70px; Верх: 6px; } #Text {позиция: абсолют; Ширина: 460px; Высота: 250px; Изменение размера: нет; Верх: 50px; Слева: 70px; Текст-интент: 5px; размер шрифта: 16px; } #box #prompt {position: Absolute; Верх: 312px; Слева: 340px; } #reffice1 {position: Absolute; Верх: 312px; Слева: 340px; дисплей: нет; } #send {position: Absolute; Высота: 25px; Ширина: 60px; высота линии: 20px; размер шрифта: 16px; Верх: 310px; Справа: 68px; } #news {list-style: none; Ширина: 490px; Полевой: 10px Auto 0px; надоеволос: 5px; } #news li {width: 490px; размер шрифта: 14px; переполнение: скрыто; фоновый цвет: #fff; маржинальный бат: 5px; позиция: относительно; } #news li h1 {font-size: 16px; высота линии: 20px; } #news li p {text-indent: 5px; ясно: осталось; } #news li span {position: Absolute; Верх: 0px; Справа: 0px; курсор: указатель; } #news Span: Hover {Color: Red; } </style> </head> <body> <div> <div id = "box"> <span class = 'span1'> title: </span> <input id = "title" type = "text"> <pan> Содержание: </span> <textarea id = "text"> </textarea> <em id = "reffice"> Вы также можете ввести <var = " id = "reffice1"> Вы превысили <var id = "textnum1"> </var> word </em> <button id = "send"> send </button> </div> <ul id = "news"> <li> <h1> </h1> <span> </span> <p> </p> </li> </ul> </up> <script> varemelement '). var text = document.getElementbyId ('text'); var send = document.getElementbyId ('send'); var ul = document.getElementbyId ('news'); var lis = ul.getElementsbytagname ('li'); var reffice = document.getElementbyId ('recaff'); var reffice1 = document.getElementbyId ('rasfor1'); 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 ~ заголовок или содержание не может быть пустым'); вернуть ложь; } lis [0] .innerhtml = '<h1>'+title.value+'</h1> <pan> × </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 изменение = maxheight/maxstep; ClearInterval (таймер1); timer1 = setInterval (function () {minstep ++; if (minstep> = maxstep) {clearInterval (timer1);} x+= изменение; 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 изменение = x/maxstep; ClearInterval (таймер1); timer1 = setInterval (function () {minstep ++; if (minstep> = maxstep) {clearInterval (timer1); ul.removechild (isme);} x- = изменение; isme.style.height = x+'px';}, 10). }}} text.onfocus = function () {// console.log (rasfor.children [0] .innerhtml); // Дети относится к детскому узлу с тегом; timer2 = setInterval (function () {if (text.value.length <190) {var num = 200-text.value.length; textnum.style.color = 'black'; // rample.style.color = 'black'; textnum.innerhtml = num; // // rompt.innerhtml = 'warcys ight income ans ight wartml wits mos wits mos wits mos wits mos wits mos wits mos wits mos wits mos wits mos wits mos wits mos wits mos wits wits mos varenum.innerhtml = Num; ID = "TextNum"> num+'</var>'; recavle.innerhtml = 'Вы также можете ввести <var id = "textnum">'+num+'</var>'; rasfic1.style.display = 'block'; } </script> </body> </html>Этот код в основном использует некоторые знания о работе узла DOM, что является исключительно работой для практики во время обучения. Вы можете ссылаться на это.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.