简易聊天框

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

#box{width:300px;height:400px;margin: 20px auto;border: solid 1px black}

#box #box1{height: 300px;border-bottom: solid 1px black;overflow: auto;}

#box1 div{max-width:220px;margin: 4px;padding: 4px;border-radius: 6px;clear: both;}

#box1 div:nth-child(2n){background: cornflowerblue;float: left;}

#box1 div:nth-child(2n-1){background: darkcyan;float: right}

#box #btns{height: 99px}

#btns *{height: 99px;border: none;padding: 0;margin: 0;background: none;float: left;}

#txt{width: 260px;padding: 20px;box-sizing: border-box}

#btn{width: 40px;border-left: solid 1px black;}

</style>

</head>

<body>

<div id="box">

<div id="box1"></div>

<div id="btns">

<textarea id="txt"></textarea>

<input type="button" value="发送" id="btn">

</div>

<script>

var btnObj = document.getElementById("btn");

var box1Obj = document.getElementById("box1");

var txtObj = document.getElementById("txt");

btnObj.onclick = ()=>{

if(txtObj.value == ""){

alert("输入错误");

}else{

var div = document.createElement("div");

div.innerHTML = txtObj.value;

box1Obj.appendChild(div);

box1Obj.scrollTop = box1Obj.scrollHeight;

txtObj.value = "";

}

</script>

</body>

</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。