微客导航 » 文章资讯 » 基于JavaScript实现留言板功能

基于JavaScript实现留言板功能

2023-07-28 14:24:12 278

本文实例为大家分享了JavaScript实现留言板功能的具体代码，供大家参考，具体内容如下

html代码



hello?

hello

hehe

goodbye

。。。。 ILOVEYOU 发送

css代码

*{
font-size:14px;
padding:0;
margin:0;
}

.main{
position:relative;
margin:20pxauto;
border:1pxsolidsteelblue;
width:430px;
height:400px;
}

.msgInput{
display:block;
width:406px;
height:60px;
margin:10pxauto;
}

.sendbtn{
position:absolute;
width:100px;
height:29px;
bottom:5px;
right:10px;
}

.content{
list-style:none;
width:410px;
height:280px;
margin:5pxauto;
border:1pxdotted#D1D3D6;
overflow-y:scroll;
}

.msgContent{
width:auto;
max-width:250px;
height:auto;
word-break:break-all;
margin:5px;
padding:3px;
border-radius:5px;
}

.content.left{
float:left;
text-align:left;
background-color:lightgrey;
}

.content.right{
float:right;
text-align:right;
background-color:yellowgreen;
}

.clear{
clear:both;
}

JS代码

varoBtn=document.getElementById("sendbtn");
varmsg=document.getElementById("msg_input");
varoCon=document.getElementById("content");
oBtn.onclick=function(){
varmsgVal=msg.value;
varli=document.createElement("li");
li.innerHTML=msgVal;
li.className="msgContentright";
vardiv=document.createElement("div");
div.className="clear";
oCon.appendChild(div);
oCon.appendChild(li);
msg.value="";
//可见范围看见当前元素
li.scrollIntoView()
};

document.onkeypress=function(e){
vare=e||event;
varcode=e.keyCode||e.which;
if(code==10){
varmsgVal=msg.value;
varli=document.createElement("li");
li.innerHTML=msgVal;
li.className="msgContentright";
vardiv=document.createElement("div");
div.className="clear";
oCon.appendChild(div);
oCon.appendChild(li);
msg.value="";
//可见范围看见当前元素
li.scrollIntoView();
}
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

基于JavaScript实现留言板功能

热门推荐

随机推荐