前端学习笔记-个人在线分享

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 += "" + oInput.value + "
";
oInput.value = "";
//   oDiv.scrollTop=oDiv.of ;
oDiv.scrollTop=oDiv.scrollHeight    //scrollheight 动态获取高度 包括滚动条隐藏起来的高度
}
};
oBtn.onclick=function () {
oDiv.innerHTML += "" + oInput.value + "
";
// oDiv.scrollTop=oDiv.scrollHeight;
oDiv.scrollTop=oDiv.offsetHeight - oDiv.clientHeight;
}
}
</script>
</body>
</html>

一	二	三	四	五	六	日
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

admin 钻石

相关推荐