qq聊天框_qq聊天框字体样式代码-优快云博客

本文链接：https://blog.youkuaiyun.com/qh19940911/article/details/89436572

本文详细介绍了一个基于HTML、CSS和jQuery的聊天界面布局及交互实现过程，包括样式设计、元素定位、动态内容生成和响应式操作。通过随机选择头像、用户名和聊天内容，展示了如何构建一个实时更新的聊天窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

布局样式
<style type="text/css">
   //全局样式
    *{
     margin:0;padding:0;
     list-style: none;
}
  //外层最大盒子样式
    .da{
      width:573px;
      height:550px;
      border:1px solid #000;
      margin:0 auto;
}
  //ul样式
    .items{
       width:573px;
       height:300px;
       overflow:auto;
}
  //文本域样式
    #wby{
       width:572px;
       height:150px;
        border:none;
}
  按钮样式
    #dj,#dj1{
         width:50px;
         background:skyblue;
         outline-style: none;
          height:30px;
}
    #dj{margin-left:400px;}
     //给头像追加的样式addclass
    .tu{width:50px;margin:5px;}
    //给qq名称追加的样式
    .ys1{width:400px;color:blue;margin-left:70px;margin-top:-60px;}
     //给聊天内容追加的样式
    .ys2{width:490px;background:#ccc;padding:5px;margin-left:70px;}
    给ul中添加的每一个li追加的样式
    .ys3{margin-bottom:15px;}
</style>
</head>
<body>
    //布局
   <div class="da">
      //ul为聊天页面，存储聊天头像，qq名称，内容
       <ul class="items"></ul>
       <img src="image/q1捕获.PNG" alt="" />
        //文本域用来输入聊天内容
       <textarea name="" id="wby" cols="30" rows="10"></textarea>
       <button id="dj">关闭(c)</button>
       <button id="dj1">发送(s)</button>
   </div>  
</body>
  //jquery部分
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
<script type="text/javascript">
   //声明一个数组存放qq名称，随机取用
    var arr=["帅帅","亨利","丁旭"];
   //声明头像的序号，随机取用
    var arr1=[2,3,4];
   //m到n之间随机数的封装函数
    function num(m,n){
        return Math.round(Math.random()*(n-m)+m);
    }
   //为页面加载绑定方法
    $(function(){
      //找到ul节点以类名方式
      var ul=$(".items");
    //为发送按钮添加点击事件
      $(dj1).click(function(){
     //判断文本域内容是否为空，如果为空则提示输入内容，并且不能执行下一步
        if(wby.value==""){
            alert("请输入");
            return;
        }
    //创建一个li标签，
        var li=$("<li></li>");
     //创建一个img标签
        var imgs=$("<img src='' alt=''>");
    //创建一个标题标签
        var h3=$("<h3></h3>");
     //创建一个p标签
        var p=$("<p></p>")
      //声明val为文本域的值
        var val=wby.value
      //设置p的内容为文本域的输入内容
        p.html(val);
     //给p添加上边设好的样式ys2
        p.addClass("ys2")
      将p添加到li中
        p.appendTo(li);
     //给文本域一个空值，可以再次输入新的内容
        wby.value="";
     //声明sum为随机数，范围为0到数组长度
        var sum=num(0,arr.length-1);
       //h3为随机的名字
        h3.html(arr[sum]);
       //为h3追加样式ys1
        h3.addClass("ys1")
      //设置图片的路径，随机图片作为头像
        imgs.attr({"src":"image/"+arr1[sum]+".jpg"});
      //给图片添加样式tu
        imgs.addClass("tu")
      //h3前置添加到li中
        h3.prependTo(li);
      //img前置添加到li中
        imgs.prependTo(li);
       //li追加样式ys3
        li.addClass("ys3")
     //li添加到ul中
        li.appendTo(ul)

      })

    })

</script>
</html>