JS小实践2-－写聊天框

最新推荐文章于 2024-03-26 22:03:24 发布

okmingxue

最新推荐文章于 2024-03-26 22:03:24 发布

阅读量1.9k

点赞数 1

本文链接：https://blog.csdn.net/okmingxue/article/details/49586201

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>聊天框</title>
    <style type="text/css">
*{
margin: 0;
padding: 0;}
        .clear{
clear: both;
}
#containter{
background: #d7e3f5;
width: 588px;
height:512px;
margin: auto;}
#top{
height: 84px;
}
#left{
width: 390px;
float: left;
}
#boxText{
border-top:1px solid #bed6f0;
border-bottom:1px solid #bed6f0;
min-height: 258px;
line-height: 1.5;
padding-top: 30px;
}
#boxText span{
font-size: 18px;
color: #ff3914;
}
#text{
width: 390px;
height: 78px;
border: none;
background: #d7e3f5;
margin-top: 30px;
}
#btn{
margin-left: 280px;
width: 88px;
height: 26px;
/*background: #50a7f9;*/
}

#ad{
width: 198px;
min-height: 428px;
background: #97d1f7;
float: left;
}
</style>
</head>
<body>
    <div id="containter">
        <div id="top"></div>
        <div id="content">
            <div id="left">
                <div id="boxText"></div>
                <div id="input">
                    <textarea id="text"></textarea>
                    <input type="button" id="btn" value="发送"  />
                </div>
            </div>
            <div id="ad"></div>
            <div class="clear"></div>
        </div>
    </div>
<script>
var oBtn=document.getElementById("btn");
var oText=document.getElementById("text");
var oBox=document.getElementById("boxText");
oBtn.οnclick=function(){
            oBox.innerHTML=oBox.innerHTML+"<span>哈哈哈</span><p>"+oText.value+"</p>";
oText.value="";
}
</script>
</body>
</html>