ผลกระทบของรหัสนี้คือการป้อนชื่อและเนื้อหาคลิกเผยแพร่เพื่อเผยแพร่ข้อความและสร้างข้อความล่าสุดไว้ที่ด้านบนของเนื้อหาเสมอ รหัสคือ:
<! 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;*/ ตำแหน่ง: ญาติ; /*ล้น: ซ่อน;*//*มาร์จิ้น: 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; Indent-Indent: 5px; ซ้าย: 70px; ด้านบน: 6px; } #text {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 460px; ความสูง: 250px; ปรับขนาด: ไม่มี; ด้านบน: 50px; ซ้าย: 70px; Indent-Indent: 5px; ขนาดตัวอักษร: 16px; } #Box #PROMPT {ตำแหน่ง: สัมบูรณ์; ด้านบน: 312px; ซ้าย: 340px; } #พรอมต์ 1 {ตำแหน่ง: สัมบูรณ์; ด้านบน: 312px; ซ้าย: 340px; แสดง: ไม่มี; } #send {ตำแหน่ง: สัมบูรณ์; ความสูง: 25px; ความกว้าง: 60px; ความสูงของสาย: 20px; ขนาดตัวอักษร: 16px; ด้านบน: 310px; ขวา: 68px; } #news {list-style: none; ความกว้าง: 490px; มาร์จิ้น: 10px auto 0px; Padding-bottom: 5px; } #news li {width: 490px; ขนาดตัวอักษร: 14px; ล้น: ซ่อน; พื้นหลังสี: #FFF; ขอบด้านล่าง: 5px; ตำแหน่ง: ญาติ; } #news li h1 {font-size: 16px; ความสูงของสาย: 20px; } #news li p {text-indent: 5px; ชัดเจน: ซ้าย; } #news li span {ตำแหน่ง: สัมบูรณ์; ด้านบน: 0px; ขวา: 0px; เคอร์เซอร์: ตัวชี้; } #news Span: Hover {color: red; } </style> </head> <body> <div> <div id = "box"> <span class = 'span1'> title: </span> <อินพุต id = "title" type = "text"> <pan> เนื้อหา: </span> <textarea id = "textare"> </textarea> <em id = "พรอมต์"> id = "พรอมต์ 1"> คุณเกินกว่า <var id = "textNum1"> </var> word </em> <ปุ่ม id = "ส่ง"> ส่ง </button> </div> <ul id = "ข่าว"> <li> <h1> </h1> <pan> var text = document.getElementById ('ข้อความ'); var send = document.getElementById ('ส่ง'); var ul = document.getElementById ('ข่าว'); var lis = ul.getElementsByTagname ('li'); var prompt = document.getElementById ('พรอมต์'); 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 == '') {แจ้งเตือน ('pro ~ title หรือเนื้อหาไม่สามารถว่างเปล่า'); กลับเท็จ; } lis [0] .innerhtml = '<h1>'+title.value+'</h1> <pan> × </span> <p>'+text.value+'</p>'; lis [0]. เด็ก [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+= เปลี่ยน; lis [1] .style.height = x+'px';}, 10) title.value = ''; text.value = ''; var close = document.getElementById ('ปิด'); สำหรับ (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 ++; ถ้า (minstep> = maxstep) {clearinterval (timer1); ul.removechild (isme);} x- = การเปลี่ยนแปลง; isme.style.height = x+'px'; }}} 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'; id = "textnum"> '+num+' </var> '; Pretc.innerhtml = 'คุณสามารถป้อน <var id = "textnum">'+num+'</var>'; Prompt1.style.display = 'block'; } </script> </body> </html>รหัสนี้ส่วนใหญ่ใช้ความรู้บางอย่างเกี่ยวกับการทำงานของ DOM Node ซึ่งเป็นงานเพื่อฝึกฝนในขณะที่เรียนรู้ คุณสามารถอ้างถึงมันได้
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น