js實(shí)現(xiàn)聊天對(duì)話框
本文實(shí)例為大家分享了js實(shí)現(xiàn)聊天對(duì)話框的具體代碼,供大家參考,具體內(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)文章
layDate插件設(shè)置開始和結(jié)束時(shí)間
這篇文章主要為大家詳細(xì)介紹了layDate插件設(shè)置開始時(shí)間和結(jié)束時(shí)間,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11
js 創(chuàng)建對(duì)象 經(jīng)典模式全面了解
下面小編就為大家?guī)硪黄猨s 創(chuàng)建對(duì)象 經(jīng)典模式全面了解。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
js 根據(jù)對(duì)象數(shù)組中的屬性進(jìn)行排序?qū)崿F(xiàn)代碼
這篇文章主要介紹了js 根據(jù)對(duì)象數(shù)組中的屬性進(jìn)行排序?qū)崿F(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
JavaScript 九種跨域方式實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript 九種跨域方式實(shí)現(xiàn)原理,什么是跨域,以及有哪幾種跨域方式,這是本文要探討的內(nèi)容。小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
JavaScript使用Proxy編寫一個(gè)取值限制器
最近一直在開發(fā)低代碼平臺(tái)的東西,由于項(xiàng)目里面東西有點(diǎn)多,取值或調(diào)用起來比較麻煩,使用本文就將使用Proxy編寫一個(gè)取值限制器,需要的小伙伴可以參考下2023-12-12
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è)上最常見不過的一個(gè)組件,本博文給出分頁(yè)欄的一個(gè)web2.0標(biāo)準(zhǔn)示例,并作簡(jiǎn)要分析2011-11-11
JS+HTML實(shí)現(xiàn)經(jīng)典游戲吃豆人
吃豆游戲可以說是我們80,90后共同的回憶錄,小時(shí)候常常在學(xué)習(xí)機(jī)上玩,所以也就有了強(qiáng)烈的欲望去寫。所以本文將利用JS+HTML實(shí)現(xiàn)這一經(jīng)典游戲,需要的可以參考一下2022-04-04

