يتمثل تأثير هذا الرمز في إدخال العنوان والمحتوى ، وانقر فوق Publish لنشر الرسالة ، وجعل آخر رسالة دائمًا في الجزء العلوي من المحتوى. الرمز هو:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> تأثير رسالة Weibo </title> <style> *{margin: 0 ؛ padding: 0 ؛} .warp {width: 600px ؛ الهامش: 50 بكسل Auto 0 ؛ خلفية اللون: #CCC ؛ } #box {width: 600px ؛ الارتفاع: 340 بكسل ؛ /*خلفية اللون: #ccc ؛*/ الموضع: النسبي ؛ /*الفائض: مخفي ؛*//*الهامش: 50px auto 0 ؛*/ font-family: 'Microsoft yahei' ؛ } #box .span1 {الموضع: absolute ؛ حجم الخط: 16 بكسل ؛ ارتفاع الخط: 16 بكسل ؛ أعلى: 10 بكسل ؛ اليسار: 5px ؛ } #box .span2 {الموضع: absolute ؛ حجم الخط: 16 بكسل ؛ ارتفاع الخط: 16 بكسل ؛ ارتفاع الخط: 16 بكسل ؛ أعلى: 50 بكسل ؛ اليسار: 5px ؛ } #title {الموضع: absolute ؛ العرض: 460 بكسل ؛ الارتفاع: 20 بكسل ؛ رفع الخط: 20 بكسل ؛ حجم الخط: 16 بكسل ؛ استولى النص: 5px ؛ اليسار: 70 بكسل ؛ أعلى: 6px ؛ } #text {position: absolute ؛ العرض: 460 بكسل ؛ الارتفاع: 250 بكسل ؛ تغيير الحجم: لا شيء ؛ أعلى: 50 بكسل ؛ اليسار: 70 بكسل ؛ استولى النص: 5px ؛ حجم الخط: 16 بكسل ؛ } #box #prompt {position: absolute ؛ أعلى: 312 بكسل ؛ اليسار: 340 بكسل ؛ } #proper1 {position: absolute ؛ أعلى: 312 بكسل ؛ اليسار: 340 بكسل ؛ العرض: لا شيء ؛ } #send {position: absolute ؛ الارتفاع: 25 بكسل ؛ العرض: 60px ؛ رفع الخط: 20 بكسل ؛ حجم الخط: 16 بكسل ؛ أعلى: 310px ؛ اليمين: 68 بكسل ؛ } #news {stylely style: none ؛ العرض: 490 بكسل ؛ الهامش: 10px Auto 0px ؛ حشوة القاع: 5 بكسل ؛ } #news li {width: 490px ؛ حجم الخط: 14px ؛ الفائض: مخفي. خلفية اللون: #fff ؛ هامش القاع: 5 بكسل ؛ الموقف: قريب } #news li h1 {font-size: 16px ؛ رفع الخط: 20 بكسل ؛ } #news li p {text-indent: 5px ؛ واضح: اليسار } #news li span {position: absolute ؛ أعلى: 0px ؛ اليمين: 0px ؛ المؤشر: مؤشر. } #news span: hover {color: red ؛ } </style> </head> <body> <viv> <div id = "box"> <span class = 'span1'> العنوان: </span> <input id = "title" type = "text"> <span> content: </span> <textarea id = "text"> </textarea> <em id = " id = "profr1"> لقد تجاوزت <var id = "textNum1"> </far> word </em> <button id = "send"> إرسال </button> </viv> <ul id = "news"> <li> <h1> </h1> <span> </span> </p> </p> </li> </ul> </liv> var text = document.getElementById ('text') ؛ var send = document.getElementById ('send') ؛ var ul = document.getElementById ('news') ؛ var lis = ul.getElementSbyTagname ('li') ؛ var proper = document.getElementById ('proper') ؛ var proper1 = document.getElementById ('progr1') ؛ 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]. 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 = 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') ؛ لـ (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 = x/maxstep ؛ ClearInterval (timer1) ؛ timer1 = setInterval (function () {minstep ++ ؛ if (minstep> = maxstep) {clearinterval (timer1) ؛ ul.removechild (isme) ؛} x- = change ؛ isme.style.height = x+'px' ؛ }}} text.onfocus = function () {// console.log (proper.children [0] .innerhtml) ؛ // يشير الأطفال إلى عقدة طفل مع علامة ؛ timer2 = setInterval (function () {if (text.value.length <190) {var num = 200-text.value.length ؛ textnum.style.color = 'black' ؛ id = "textNum" erv.innerhtml = "يمكنك أيضًا إدخال <var id =" textNum ". promply.style.display = 'block' ؛ } </script> </body> </html>يستخدم هذا الرمز بشكل أساسي بعض المعرفة بتشغيل عقدة DOM ، وهو عمل بحت لممارسة أثناء التعلم. يمكنك الرجوع إليها.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.