仿机器人聊天窗口

仿机器人聊天窗口知识点：

1、appendChild()和append()一样    //扩展prepend（）和insertBefore（）一样
2、document.creatElement()  创建元素
3、Math.floor和 Math.random
4、setTimeout函数
5、if（）语句
6、获取DOM元素

仿机器人聊天窗口DOM

<div>
   <h2>在线客服</h2>
   <div contenteditable="true">
      <ul>
      </ul>
   </div>
   <table>
      <tr>
         <td align="right"><textarea cols="50" rows="4" name="text" autofocus></textarea></td>
         <td align="left"><button type=button>发送</button></td>
      </tr>
   </table>   
</div>

仿机器人聊天窗口JS

<script>
   var bt=document.getElementsByTagName('button')[0];
   var text=document.getElementsByName('text')[0];
   var ul=document.getElementsByTagName('ul')[0];
   var sum=0;
   bt.addEventListener("click",sent);
   function sent() {
      if(text.value.length===0){
         alert('是不是忘记了说点什么')
      }
      var li =document.createElement('li');
      var img='<img src="../images/cat.jpeg" width="30" height="30" style="border-radius:50%;">';
      li.innerHTML=img;
      li.innerHTML+=text.value;
      li.style.clear='both';
      ul.append(li);
      text.value='';
      sum+=1;
      setTimeout(function () {
         var reply=['你在想什么，想js？html？css？','是不是感觉很难？','想过要放弃嘛','是不是觉得自己很笨'];
         var i =Math.floor(Math.random()*4);
         var li1=document.createElement('li');
         var img1='<img src="../images/zly.jpg" width="30" style="border-radius: 50%;float: right">';
         li1.innerHTML=img1;
         li1.innerHTML+='<span style="color: coral;float: right">'+reply[i]+'</span>';
         ul.append(li1);
         sum+=1;
      },600);
      if(sum>12){
         ul.innerHTML='';
         sum=0;
      }
   }
</script>