溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用JavaScript怎么實現一個聊天對話框，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
具體內容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box{
width:300px;
height:400px;
border:1px solid blue;
margin:0 auto;
}
.inTer{
width:280px;
height:280px;
border:1px solid deeppink;
margin:0 auto;
margin-top:10px;
overflow-y:auto;
}
textarea{
display:block;
width: 276px;
height:65px;
margin:0 auto;
margin-top:5px;
}
#btn{
display:block;
float:right;
margin-right:10px;
margin-top:5px;
}
p{
display:inline-block;
border-radius:5px;
background:#dcdcdc;
font-size:12px;
padding:5px 5px;
margin:5px 0;
margin-left:5px;
max-width:140px;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="box">
<div class="inTer" id="father">
<p>你好</p ></br>
<p>你好</p ></br>
<p>你好</p ></br>
<p>heiheiheiheiehieheieheieheieheiheiehe</p ></br>
</div>
<textarea id="txt">
</textarea>
<input type="button" id="btn" value="發送" />
</div>
</body>
</html>
<script>
var btn = document.getElementById("btn");
var txt = document.getElementById("txt");
var father = document.getElementById("father")
var p = document.getElementsByTagName("p");
btn.onclick=function(){
if(txt.value==""){
alert("請勿發送空內容");
}
else{
var son = document.createElement("p");
son.style.backgroundColor="yellowgreen";
son.style.clear="both";
son.style.float="right";
son.style.marginRight="5px";
son.innerText=txt.value;
father.appendChild(son);
txt.value="";
son.scrollIntoView();
}
}
document.onkeydown=function(evt){
var e = evt || event;
e.keyCode=e.which=e.charCode;
if(e.keyCode==13 || e.keyCode==10){
if(txt.value==""){
alert("請勿發送空內容");
}
else{
var son = document.createElement("p");
son.style.backgroundColor="yellowgreen";
son.style.clear="both";
son.style.float="right";
son.style.marginRight="5px";
son.innerText=txt.value;
father.appendChild(son);
txt.value="";
son.scrollIntoView();
}
}
}
</script>以上就是使用JavaScript怎么實現一個聊天對話框，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
