このコードの効果は、タイトルとコンテンツを入力し、[公開]をクリックしてメッセージを公開し、最新のメッセージを常にコンテンツの一番上に作成することです。コードは次のとおりです。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> weiboメッセージ効果</title> <style> *{margin：0; padding：0;} .warp {width：600px;マージン：50px auto 0;バックグラウンドカラー：#ccc; } #box {width：600px;高さ：340px; /*background-color：#ccc;*/ position：relative; /*オーバーフロー：hidden;*//*マージン：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 {position：absolute;幅：460px;高さ：250px;サイズのサイズ：なし;トップ：50px;左：70px;テキストインデント：5px;フォントサイズ：16px; } #box #prompt {position：absolute;トップ：312px;左：340px; }＃pippt1 {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スパン：Hover {color：red; } </style> </head> <body> <div> <div id = "box"> <span class = 'span1'> title：</span> <input id = "text" type = "> <span> content：</span> <textarea id =" text "> </textarea> <em id =" prompt "> ID = "PRONT1">あなたは<var id = "textnum1"> </var> word </em> <button id = "send"> send </button> </div> <ul id = "news"> <li> <h1> </h1> </span> <p> </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 = null、timer2 = null; send.onclick = function（）{if（text.value == '' || title.value == ''）{alert（ 'pro〜titleまたはcontent can couns each'）; falseを返します。 } 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.tyle.height = x+'px';}、10） }}} 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 ;// id = "textnum+'</var>'; Innerhtml = '<var id = ">'+'</var>'; PRONT1.STYLE.DISPLAY = 'Block'; } </script> </body> </html>このコードは、主にDOMノード操作の知識を使用しています。これは、学習中に実践するための純粋な作業です。あなたはそれを参照することができます。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。