day25
聊天框的模拟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 300px;
height: 200px;
border: 1px solid black;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="text"><button>发送</button>
<script>
onload=function () {
var oDiv=document.querySelector("div")
var oInput=document.querySelector("input")
var oBtn=document.querySelector("button")
oInput.onkeydown = function (e) {
if (e.ctrlKey && e.keyCode == 13) {
oDiv.innerHTML += "<p>" + oInput.value + "</p>";
oInput.value = "";
// oDiv.scrollTop=oDiv.of ;
oDiv.scrollTop=oDiv.scrollHeight //scrollheight 动态获取高度 包括滚动条隐藏起来的高度
}
};
oBtn.onclick=function () {
oDiv.innerHTML += "<p>" + oInput.value + "</p>";
// oDiv.scrollTop=oDiv.scrollHeight;
oDiv.scrollTop=oDiv.offsetHeight - oDiv.clientHeight;
}
}
</script>
</body>
</html>
