Efek dari kode ini adalah untuk memasukkan judul dan konten, klik Publikasikan untuk menerbitkan pesan, dan membuat pesan terbaru selalu di bagian atas konten. Kodenya adalah:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <itement> efek pesan weibo </iteme> <tyle> *{margin: 0; padding: 0;} .warp {width: 600px; Margin: 50px Auto 0; Latar Belakang-Color: #CCC; } #box {width: 600px; Tinggi: 340px; /*latar belakang-warna: #ccc;*/ posisi: relatif; /*overflow: tersembunyi;*//*margin: 50px auto 0;*/ font-family: 'microsoft yahei'; } #box .span1 {position: absolute; font-size: 16px; Line-Height: 16px; Atas: 10px; Kiri: 5px; } #box .span2 {position: absolute; font-size: 16px; Line-Height: 16px; Line-Height: 16px; Atas: 50px; Kiri: 5px; } #title {position: absolute; Lebar: 460px; Tinggi: 20px; Line-Height: 20px; font-size: 16px; Teks-inden: 5px; Kiri: 70px; Atas: 6px; } #text {position: absolute; Lebar: 460px; Tinggi: 250px; Ubah Ukuran: Tidak Ada; Atas: 50px; Kiri: 70px; Teks-inden: 5px; font-size: 16px; } #box #promppt {position: absolute; Atas: 312px; Kiri: 340px; } #prompt1 {position: absolute; Atas: 312px; Kiri: 340px; Tampilan: Tidak Ada; } #send {position: absolute; Tinggi: 25px; Lebar: 60px; Line-Height: 20px; font-size: 16px; Atas: 310px; Kanan: 68px; } #news {List-style: none; Lebar: 490px; margin: 10px auto 0px; padding-bottom: 5px; } #news li {width: 490px; Ukuran font: 14px; meluap: tersembunyi; Latar Belakang-Color: #FFF; margin-bottom: 5px; Posisi: kerabat; } #news li h1 {font-size: 16px; Line-Height: 20px; } #news li p {teks-indent: 5px; Jelas: Kiri; } #news li span {position: absolute; Atas: 0px; Kanan: 0px; kursor: pointer; } #news span: hover {color: red; } </tyle> </head> <body> <div> <div id = "box"> <span class = 'span1'> title: </span> <input id = "title" type = "text"> <span> konten: </span> <textarea id = "text"> </textarea> <em id = "prompt" Anda juga dapat masuk <var id = "Text"> </textarea> <em id = "prompt"> <var> varia = "Text" </textarea> <em id = "prompt"> id="prompt1">You have exceeded <var id="textnum1"></var>word</em> <button id="send">Send</button> </div> <ul id="news"> <li><h1></h1><span></span> <p></p> </li> </ul> </div> <script> var title=document.getElementById('title'); 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 atau konten tidak dapat kosong'); mengembalikan 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+= ubah; lis [1] .style.height = x+'px';}, 10) judul.value = ''; Text.Value = ''; var close = document.getElementById ('close'); untuk (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- = perubahan; isme.style.height = x+'px';}, 10) // ul. }}} text.onfocus = function () {// console.log (prompt.children [0] .innerHtml); // anak -anak mengacu pada simpul anak dengan 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; //// promper = 'black'; textnum.innerHtml = num; //// promper = 'Black'; TextNum.innerHtml = num;/// priver. ID = TextNum "> Num+'</var>'; prompt.innerHtml = Anda juga dapat memasukkan <var id = "textNum"> '+num+' </var> '; prompt1.style.display = 'block'; } </script> </body> </html>Kode ini terutama menggunakan beberapa pengetahuan tentang operasi dom node, yang murni pekerjaan untuk dipraktikkan saat belajar. Anda bisa merujuknya.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.