このコードの効果は、タイトルとコンテンツを入力し、[公開]をクリックしてメッセージを公開し、最新のメッセージを常にコンテンツの一番上に作成することです。コードは次のとおりです。
<!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をもっとサポートすることを願っています。