作业14-QQ简易聊天框

最新推荐文章于 2023-08-11 16:59:58 发布

时刻的慌张

最新推荐文章于 2023-08-11 16:59:58 发布

阅读量1.9k

点赞数 2

本文链接：https://blog.csdn.net/hcl430422hcl/article/details/87177977

版权


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>QQ简易聊天框</title>
   
   <style>
   	*{margin: 0; padding: 0; line-height: 22px; font-family: "Arial", "微软雅黑";}
#chat{margin: 3px auto 0 auto; width:436px; border: 1px #999999 solid;}
.chatBody{width: 100%; height: 220px; overflow:auto;}
.chatText{border: none; width: 100%; height: 50px;}
.btn{text-align: right;}
.btn span{display: inline-block; padding: 0 10px; height: 25px;
    overflow: hidden; color: #ffffff; border-radius: 5px; background-color: #069dd5; font-size: 12px; margin-right: 3px; cursor:pointer;}
.chatBody div:first-of-type{float: left; width: 38px;}
.chatBody p{float: left; font-size: 12px; width:370px; color: #0000ff;}
.chatBody div:last-of-type{
    float: left; width: 370px; font-size: 12px;}
.chatBody section{clear: both;}
.chatContent{ background:#efefef;border-radius: 5px; padding: 3px;}
   </style>
</head>
<body>
<section id="chat">
    <div class="chatBody"></div>
    <div><img src="img/icon.jpg"></div>
    <textarea class="chatText"></textarea>
    <div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script >
	
$(document).ready(function(){
    var headImg=new Array("head01.jpg","head02.jpg","head03.jpg");
    var uName=new Array("时尚伊人","六月奇迹","松松");
    $("#send").click(function(){
        if($(".chatText").val().length>0){  //判断当前输入框中是否有内容
            var str=$(".chatBody").html();      //获取当前聊天内容
            var iNum=Math.floor(Math.random()*3);  //随机获取头像和昵称
            var headStr="<div><img src=img/"+headImg[iNum]+"></div>";   //设置头像
            var userName="<p>"+uName[iNum]+"</p>";                           //设置昵称
            var chatStr="<div>"+$(".chatText").val()+"</div>";    //获取并设置当前输入的内容
            var currentStr="<section>"+headStr+userName+chatStr+"</section>"; //当前聊天的头像、昵称和内容
            $(".chatBody").html(str+currentStr);
            $(".chatBody section div:last").addClass("chatContent");
            $(".chatText").val("");//清除文本框中的内容
        }
    });
})

</script>
</body>
</html>

时刻的慌张

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
作业14-QQ简易聊天框

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;QQ简易聊天框&lt;/title&gt; &lt;style&gt; *{margin: 0; padding: 0;
复制链接

扫一扫