js實(shí)現(xiàn)聊天對(duì)話(huà)框
更新時(shí)間：2020年02月08日 11:28:32 作者：since �
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)聊天對(duì)話(huà)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)聊天對(duì)話(huà)框的具體代碼，供大家參考，具體內(nèi)容如下
<!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 style="resize: none;" id="txt">
</textarea>
<input type="button" id="btn" value="發(fā)送" />
</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("請(qǐng)勿發(fā)送空內(nèi)容");
}
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("請(qǐng)勿發(fā)送空內(nèi)容");
}
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要通過(guò)動(dòng)畫(huà)的示例來(lái)為大家詳細(xì)介紹一下JavaScript的函數(shù)封裝，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以學(xué)習(xí)一下2022-03-03
layDate插件設(shè)置開(kāi)始和結(jié)束時(shí)間
這篇文章主要為大家詳細(xì)介紹了layDate插件設(shè)置開(kāi)始時(shí)間和結(jié)束時(shí)間，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
js 創(chuàng)建對(duì)象 經(jīng)典模式全面了解
下面小編就為大家?guī)?lái)一篇js 創(chuàng)建對(duì)象 經(jīng)典模式全面了解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
js 根據(jù)對(duì)象數(shù)組中的屬性進(jìn)行排序?qū)崿F(xiàn)代碼
這篇文章主要介紹了js 根據(jù)對(duì)象數(shù)組中的屬性進(jìn)行排序?qū)崿F(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript 九種跨域方式實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript 九種跨域方式實(shí)現(xiàn)原理，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
JavaScript使用Proxy編寫(xiě)一個(gè)取值限制器
最近一直在開(kāi)發(fā)低代碼平臺(tái)的東西,由于項(xiàng)目里面東西有點(diǎn)多,取值或調(diào)用起來(lái)比較麻煩,使用本文就將使用Proxy編寫(xiě)一個(gè)取值限制器,需要的小伙伴可以參考下2023-12-12
靜態(tài)頁(yè)面的值傳遞(三部曲)...2006-09-09
webpack教程之webpack.config.js配置文件
本篇文章主要介紹了webpack教程之webpack.config.js配置文件 ，具有一定的參考價(jià)值，有興趣的可以了解一席2017-07-07
分頁(yè)欄的web標(biāo)準(zhǔn)實(shí)現(xiàn)
分頁(yè)欄是網(wǎng)頁(yè)上最常見(jiàn)不過(guò)的一個(gè)組件，本博文給出分頁(yè)欄的一個(gè)web2.0標(biāo)準(zhǔn)示例，并作簡(jiǎn)要分析2011-11-11
JS+HTML實(shí)現(xiàn)經(jīng)典游戲吃豆人
吃豆游戲可以說(shuō)是我們80，90后共同的回憶錄，小時(shí)候常常在學(xué)習(xí)機(jī)上玩，所以也就有了強(qiáng)烈的欲望去寫(xiě)。所以本文將利用JS+HTML實(shí)現(xiàn)這一經(jīng)典游戲，需要的可以參考一下2022-04-04