留言板

留言板主要是通过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里的知识点熟练运用。

部分代码如下:

 

  
  
  
  
  1. <style> 
  2.         body,div,ul,li,input{margin:0;padding:0;} 
  3.         div{width:200px;margin:100px auto;} 
  4.         ul{width:200px;margin-bottom:50px;} 
  5.         li{width:90%;list-style-type:none;font-weight:16px;text-indent:12px;float:left;} 
  6.         textarea{height:50px;width:100%;font-size:16px;} 
  7. </style> 
  8.  
  9. <body> 
  10.     <div> 
  11.         <ul id='ly'
  12.             <li style="width:100%;">留言的问题</li> 
  13.              
  14.         </ul> 
  15.         <textarea  id="tta">AAA</textarea> 
  16.         <input type='button' style="margin-top:10px;height:30px;width:50px;" id='fb' value='发布'
  17.     </div> 
  18.     <script> 
  19.         var tta=document.getElementById('tta'); 
  20.         var ly=document.getElementById('ly'); 
  21.         var fb=document.getElementById('fb'); 
  22.         var inpts=[]; 
  23.         var lis=[]; 
  24.         var ii=0; 
  25.         fb.onclick=fbff; 
  26.         function fbff(){ 
  27.         x1=0;x2=0; 
  28.             var li=document.createElement('li'); 
  29.             //alert(tta.value) 
  30.             //var text=document.createTextNode(tta.value); 
  31.             var text=tta.value; 
  32.             //var aa=tta.value; 
  33.             //console.log(aa); 
  34.             alert(text) 
  35.         //  var aa=text.indexOf(' ');alert(aa); 
  36.             if(text.length==0||tta.value.indexOf(" ")==0){ 
  37.                 alert('留言不能为空!!请输入留言!!!'
  38.                 return
  39.             } 
  40.             else
  41.                 tta.value=''
  42.                 var inpt1=document.createElement('input'); 
  43.                 inpt1.setAttribute('type','button'); 
  44.                 inpt1.setAttribute('value','x'); 
  45.                 inpt1.style.opacity=0; 
  46.                 li.style.opacity=0; 
  47.                 ly.appendChild(li); 
  48.                 //li.appendChild(text);  
  49.                 li.innerHTML=text; 
  50.                  
  51.                 ly.appendChild(inpt1); 
  52.                 lis[ii]=li; 
  53.                 inpts[ii]=inpt1; 
  54.                 ii++; 
  55.                 move(li,inpt1); 
  56.                  
  57.                 for(var i=0;i<inpts.length;i++){ 
  58.                     inpts[i].onclick=del; 
  59.                 } 
  60.             } 
  61.              
  62.         } 
  63.         function del(){ 
  64.             for(var i=0;i<inpts.length;i++){ 
  65.                 if(this==inpts[i]){ 
  66.                     ly.removeChild(inpts[i]); 
  67.                     ly.removeChild(lis[i]); 
  68.                      
  69.                 } 
  70.             } 
  71.         } 
  72.         var t1;var x1=0;var x2=0; 
  73.         function move(a,b){ 
  74.         //console.log(a); 
  75.         //alert(a) 
  76.         var aa=a; 
  77.         var bb=b; 
  78.          
  79.         if(a.style.opacity==1){ 
  80.             clearTimeout(t1); 
  81.             return
  82.         } 
  83.         x1=x1+0.008; 
  84.         x2=x2+0.008; 
  85.         aa.style.opacity=x1; 
  86.         bb.style.opacity=x2;console.log(x1,x2); 
  87.         t1=setTimeout(function (a,b){move(aa,bb);},17); 
  88.         } 
  89.     </script> 
  90. </body> 
  91. </html> 

你可能感兴趣的:(JavaScript,js,留言板)