留言板功能

最新推荐文章于 2023-05-31 22:33:31 发布

jsonW

最新推荐文章于 2023-05-31 22:33:31 发布

阅读量683

点赞数

分类专栏： DOM操作-实现留言

本文链接：https://blog.csdn.net/qq_21773607/article/details/46367475

版权

DOM操作-实现留言专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这是一个使用HTML、CSS和JavaScript实现的简单留言板。当点击'留言'按钮或按下Ctrl+Enter键时，输入框的内容将变为一个新的列表项显示在页面上，并提供一个删除按钮，用于移除该留言。代码利用了document.createElement、appendChild、insertBefore和removeChild等DOM操作。

摘要由CSDN通过智能技术生成

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>message board</title>
<style type="text/css">
#leave{
background-color: green;
}
ul{list-style: none;width:402px;margin:0px;padding: 0px;}
.mes{
background-color:#cccccc;
width:400px;
overflow-y:visible;
margin-top:5px;
}
.delete{background-color:yellow;margin-left: 300px;}
</style>
<script type="text/javascript">
/*
知识点：
1.document.createElement(标签名称); 创建元素
2.父级.appendChild(要添加的元素) 方法追加子元素
oMessage.appendChild( myLi );
父级.insertBefore(新的元素，被插入的元素) 方法在指定元素前面插入一个新元素
在ie下如果第二个参数的节点不存在，会报错
在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
oMessage.insertBefore( myLi, oMessage.children[0] );
3.父级.removeChild(要删除的元素); 删除元素
*/
window.οnlοad=function(){
var oNotes=document.getElementById('notes');
var oLeave=document.getElementById('leave');
var oMessage=document.getElementById('messages');
oLeave.οnclick=function(){
leaveMes();
}
function leaveMes(){
var myLi=document.createElement('li');
myLi.innerHTML=oNotes.value;
myLi.className='mes';
var oDelete=document.createElement('input');
oDelete.setAttribute('type','button');
oDelete.className='delete';
oDelete.value='删除';
myLi.appendChild(oDelete);
if(oMessage.children[0]){
oMessage.insertBefore(myLi,oMessage.children[0]);
}else{
oMessage.appendChild(myLi);
}
oDelete.οnclick=function(){
oMessage.removeChild( this.parentNode );
}
}

document.onkeydown = function(ev){
var oEvent=ev||event;
if (oEvent.keyCode == 13 && oEvent.ctrlKey) {
leaveMes();
}
}
}
</script>
</head>
<body>
<textarea name="notes_text" id="notes" cols="30" rows="10"></textarea>
<input type="button" id="leave" value="留言">
<ul id="messages"></ul>
</body>
</html>