이 코드의 효과는 제목과 컨텐츠를 입력하고 게시를 클릭하여 메시지를 게시하고 항상 컨텐츠의 최상위에 최신 메시지를 만드십시오. 코드는 다음과 같습니다.
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> weibo 메시지 효과 </title> <style> *{margin : 0; 패딩 : 0;} .Warp {width : 600px; 마진 : 50px auto 0; 배경색 : #CCC; } #box {너비 : 600px; 높이 : 340px; /*배경색 : #CCC;*/ 위치 : 상대; /*오버플로 : 숨겨진;*//*마진 : 50px auto 0;*/ font-family : 'Microsoft Yahei'; } #box .span1 {위치 : 절대; 글꼴 크기 : 16px; 라인 높이 : 16px; 상단 : 10px; 왼쪽 : 5px; } #box .span2 {위치 : 절대; 글꼴 크기 : 16px; 라인 높이 : 16px; 라인 높이 : 16px; 상단 : 50px; 왼쪽 : 5px; } #Title {위치 : 절대; 너비 : 460px; 높이 : 20px; 라인 높이 : 20px; 글꼴 크기 : 16px; 텍스트 안정 : 5px; 왼쪽 : 70px; 상단 : 6px; } #text {위치 : 절대; 너비 : 460px; 높이 : 250px; 크기 조정 : 없음; 상단 : 50px; 왼쪽 : 70px; 텍스트 안정 : 5px; 글꼴 크기 : 16px; } #box #prompt {위치 : 절대; 상단 : 312px; 왼쪽 : 340px; } #prompt1 {위치 : 절대; 상단 : 312px; 왼쪽 : 340px; 디스플레이 : 없음; } #send {위치 : 절대; 높이 : 25px; 너비 : 60px; 라인 높이 : 20px; 글꼴 크기 : 16px; 상단 : 310px; 오른쪽 : 68px; } #news {List-Style : 없음; 너비 : 490px; 여백 : 10px 자동 0px; 패딩 바닥 : 5px; } #news li {너비 : 490px; 글꼴 크기 : 14px; 오버플로 : 숨겨진; 배경색 : #fff; 마진 바닥 : 5px; 위치 : 상대; } #news li h1 {font-size : 16px; 라인 높이 : 20px; } #news li p {텍스트-안정 : 5px; Clear : 왼쪽; } #news li span {위치 : 절대; 상단 : 0px; 오른쪽 : 0px; 커서 : 포인터; } #news span : hover {색상 : 빨간색; . id = "prompt1"> 당신은 <var id = "textnum1"> </var> word </vir> <button id = "send"> send </div> <ul id = "news"> <li> <h1> </h1> <span> </span> <p> </p> </li> </ul> <script> var var var var var var var var var </div> </div> <); 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 = null, timer2 = null; send.onclick = function () {if (text.value == ''|| title.value == '') {alert ( 'pro ~ title 또는 내용이 비어있을 수 없음'); 거짓을 반환합니다. } 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+= change; 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- = change; isme.style.height = x+'px';}, 10) // ul. }}} text.onfocus = function () {// console.log (prompt.children [0] .innerhtml); // 어린이는 태그가있는 하위 노드를 나타냅니다. 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; innerhtml = var < Id = "+Num+'</var>'; innerhtml = 'textnum.innerhtml = num; promp1.display = 'block'; } </script> </body> </html>이 코드는 주로 DOM 노드 작동에 대한 지식을 사용하는데, 이는 학습 중에 실천하는 작업입니다. 당신은 그것을 참조 할 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.