作业

最新推荐文章于 2022-10-21 10:20:40 发布

xyz430771x

最新推荐文章于 2022-10-21 10:20:40 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/xyz430771x/article/details/87278977

版权

OCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
  <script type="text/javascript">
    $(document).ready(function(){
      var headImg=new Array("head01.jpg","head02.jpg","head03.jpg");
      var uName=new Array("时尚伊人","六月奇迹","松松");
      $("#end").click(function(){
        if($(".text").val().length>0){
          var str=$(".body").html();
          var iNum=Math.floor(Math.random()*3);
          var headStr="<div><img src=images/"+headImg[iNum]+"></div>";
          var userName="<p>"+uName[iNum]+"</p>";
          var chatStr="<div>"+$(".text").val()+"</div>";
          var currentStr="<section>"+headStr+userName+chatStr+"</section>";
          var headStr
          $(".body").html(str+currentStr);
          $(".body section div:last").addClass("content");
          $(".text").val("");
        }
      });
    })
  </script>
  <style>
    *{
      margin: 0;
      padding: 0;
      line-height: 22px;
      font-family: "Arial", "微软雅黑";
    }
    #t{
      margin: 3px auto 0 auto;
      width:436px;
      border: 1px #000000 solid;
    }
    .body{
      width: 100%;
      height: 220px;
      overflow:auto;
    }
    .text{
      border: none;
      width: 100%;
      height: 50px;

    }
    .n {
      text-align: right;

    }
    .n span{
      display: inline-block;
      padding: 0 10px;
      height: 25px;
      overflow: hidden;
      color: #ffffff;
      border-radius: 5px;
      background-color: #0000ff;
      font-size: 12px;
      margin-right: 3px;
      cursor:pointer;
    }
    .body div:first-of-type{
      float: left;
      width: 38px;
    }
    .body p{
      float: left;
      font-size: 12px;
      width:370px;
      color: #0000ff;
    }
    .body div:last-of-type{
      float: left;
      width: 370px;
      font-size: 12px;
    }
    .body section{
      clear: both;
    }
    .content{
      background:#CAEFFE;
      border-radius: 5px;
      padding: 3px;
    }
  </style>
</head>
<body>
<section id="t">
  <div class="body"></div>
  <div><img src="../vid/t206/icon.jpg"></div>
  <textarea class="text"></textarea>
  <div class="n"><span>关闭(C)</span><span id="end">发送(S)</span></div>
</section>
</body>
</html>

---------------------