留言板主要是通過DOM裏的方法來實現的，用的知識點有document.createElement(‘li’),創建標籤；獲取標籤裏的內容有兩種方法：var text=document.createTextNode(text.value),
var text=text.value；設置標籤inpt.setAttribute(‘type’,’button’);插入標籤dad.appendChild(child);
給新建的標籤賦值：li.appendChild(text); li.innerHTML=text;。總的來說留言板只是把DOM裏的知識點熟練運用。
部分代碼如下：
- <style>
- body,div,ul,li,input{margin:0;padding:0;}
- div{width:200px;margin:100px auto;}
- ul{width:200px;margin-bottom:50px;}
- li{width:90%;list-style-type:none;font-weight:16px;text-indent:12px;float:left;}
- textarea{height:50px;width:100%;font-size:16px;}
- </style>
- <body>
- <div>
- <ul id='ly'>
- <li style="width:100%;">留言的問題</li>
- </ul>
- <textarea id="tta">AAA</textarea>
- <input type='button' style="margin-top:10px;height:30px;width:50px;" id='fb' value='發佈'>
- </div>
- <script>
- var tta=document.getElementById('tta');
- var ly=document.getElementById('ly');
- var fb=document.getElementById('fb');
- var inpts=[];
- var lis=[];
- var ii=0;
- fb.onclick=fbff;
- function fbff(){
- x1=0;x2=0;
- var li=document.createElement('li');
- //alert(tta.value)
- //var text=document.createTextNode(tta.value);
- var text=tta.value;
- //var aa=tta.value;
- //console.log(aa);
- alert(text)
- // var aa=text.indexOf(' ');alert(aa);
- if(text.length==0||tta.value.indexOf(" ")==0){
- alert('留言不能爲空！！請輸入留言！！！')
- return;
- }
- else{
- tta.value='';
- var inpt1=document.createElement('input');
- inpt1.setAttribute('type','button');
- inpt1.setAttribute('value','x');
- inpt1.style.opacity=0;
- li.style.opacity=0;
- ly.appendChild(li);
- //li.appendChild(text);
- li.innerHTML=text;
- ly.appendChild(inpt1);
- lis[ii]=li;
- inpts[ii]=inpt1;
- ii++;
- move(li,inpt1);
- for(var i=0;i<inpts.length;i++){
- inpts[i].onclick=del;
- }
- }
- }
- function del(){
- for(var i=0;i<inpts.length;i++){
- if(this==inpts[i]){
- ly.removeChild(inpts[i]);
- ly.removeChild(lis[i]);
- }
- }
- }
- var t1;var x1=0;var x2=0;
- function move(a,b){
- //console.log(a);
- //alert(a)
- var aa=a;
- var bb=b;
- if(a.style.opacity==1){
- clearTimeout(t1);
- return;
- }
- x1=x1+0.008;
- x2=x2+0.008;
- aa.style.opacity=x1;
- bb.style.opacity=x2;console.log(x1,x2);
- t1=setTimeout(function (a,b){move(aa,bb);},17);
- }
- </script>
- </body>
- </html>