手记 / 在线智能客服学习总结下

在线智能客服学习总结下

2天前5浏览0评论
<!DOCTYPE html>
<html>
<head>
 <title>模拟智能在线客服系统</title>
 <style type="text/css">
  .div_1{
   width: 450px;
   height: 650px;
   background-color: lightskyblue;
   margin: 30px auto;
   color: #333;
   box-shadow: 2px 2px 2px #808080;
  }
  h2{
   text-align: center;
   margin-bottom:-10px;
  }
        
        .div_2{
         width: 400px;
         height: 500px;
         border: 4px double green;
         background-color: #efefef;
         margin: 20px auto 10px;
        }
        ul{
         list-style-type: none;
         line-height: 2em;
         overflow: hidden;
         padding: 15px;
        }
        table{
         width: 90%;
         height: 80px;
         margin: auto;
        }
        textarea{
         border: none;
         resize: none;
         background-color: lightyellow;
        }
        button{
         width: 60px;
         height: 40px;
         background-color: seagreen;
         color: white;
         border: none;
        }
        button:hover{
         cursor: pointer;
         background-color: orange;
        }
 </style>
</head>
<body>
  <div class="div_1">
    <h2>在线客服</h2>
    <div class="div_2">
     <ul>
      <li></li>
     </ul>
    </div>
    <table>
     <tr>
      <td class="right"><textarea name="text" cols='50' rows='4'></textarea></td>
      <td class="left"><button type="button">发送</button></td>
     </tr>
    </table>
  </div>
  <script type="text/javascript">
   //获取到页面上相关的元素
   var btn=document.getElementsByTagName('button')[0];
    var text=document.getElementsByName('text')[0];
    var list =document.getElementsByTagName('ul')[0];
    var sum = 0;  //这是计数器
    //添加点击事件,获取用户说的内容并发生到窗口
    btn.onclick=function(){
     //获取用户提交的内容
     if(text.value.length===0){
              alert('是不是忘记填写信息?');
              return flase;
     }
     var userComment = text.value;//将用户提交的信息获取并保存
     text.value='';
     //创建一个li
     var li = document.createElement('li');
     
     //创建个用户头像
     var userPic='<img src="1.jpg" width="30" style="border-radius:50%">';
     li.innerHTML=userPic+' '+userComment;
     list.appendChild(li);  //将用户信息添加到窗口中
     sum+=1;
     //设置一个定时器
     setTimeout(function(){
      var info=[
                '你真了不起哦',
                '你是我的小天使',
                '你个大还丹',
                '今天下雪了,天气好冷',
                '你是逗逼吗?'
      ];
      var temp = info[Math.floor(Math.random()*4)];
      var replay = document.createElement('li');
      var kefuPic = '<img src="2.jpg" width="30" style="border-radius:50%">';
      replay.innerHTML=kefuPic + ' ' + '<span style="color:red;">'+temp+'</span>';
      list.appendChild(replay);
      sum+=1;
     },2000);
     //清空窗口并将计时器清零
     if(sum>10){
      list.innerHTML='';
      sum=0;
     }
    }
  </script>
</body>
</html>

本节课程主要学习到了获取元素,关联元素,插入元素,清空窗口和计数器和setTimeout定时器的设置

相关标签:HTMLJavaScript
    0推荐

      吴勇文

      PHP开发工程师加油!努力!奋斗!

      作者的热门手记

      PHP中文网

      未登录