js简单的留言功能代码实例

快乐打工仔 分类:实例代码

当然真正具有实用价值的留言板需要通过和数据库的配合,把留言写入数据库,然后再显示出来。

本章节只是演示一下如何使用纯前端实现留言板功能,主要演练一下dom元素的操作。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#box{
width: 800px;
margin: 0 auto;
}
textarea{
width: 800px;
}
#ul1{
list-style: none;
position: relative;
}
#li:first-child{
color: red;
font-weight: bold;
}
#li{
border-bottom: 1px dashed #ebebeb;
margin:10px 0;
padding:8px 0;
}
#ddd{
text-decoration: none;
position: absolute;
bottom: 0;
right: 0;
margin:0 5px;
display: block;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<h3>在下面可以进行留言</h3>
<textarea name="" id="text"  rows="10"></textarea>
<input type="button" value="确认发布" id="btn"/>
<h3>全部留言</h3>
<hr/>
</div>
<script>
var box = document.getElementById("box");
var text = document.getElementById("text");
var btn = document.getElementById("btn");
var ul = document.createElement("ul");
ul.id = "ul1";
ul.className = "li1";
var div = document.createElement("div");
var div2 = document.createElement("div2");
var date = new Date();
var year = date.getFullYear();
var yue = date.getMonth() + 1;
var ri = date.getDate();
var week = date.getDay();
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var br = document.createElement("br");
btn.onclick = function() {
//创建时间
div = document.createTextNode(" " + year + "-" + yue + "-" + ri + "");
div2 = document.createTextNode(week + " " + hour + ":" + min + ":" + sec);
var li = document.createElement("li");
li.id = "li";
//创建删除功能
var oA = document.createElement("a");
oA.id = "ddd";
oA.href = "#";
oA.innerHTML = "删除";
oA.className = "del";
oA.style.display = "block";
//删除
oA.onclick = function() {
ul.removeChild(this.parentNode);
};
//添加头像
var aImg = document.createElement("img");
var num = parseInt(Math.random() * 8 + 1);
aImg.src = "img/face" + num + ".gif";
//解决兼容问题
var ali = ul.children;
if (ali.length == 0) {
ul.appendChild(li);
} else {
ul.insertBefore(li, ali[0]);
}
//添加节点
box.appendChild(ul);
var textnode = document.createTextNode(text.value);
li.appendChild(aImg);
li.appendChild(textnode);
li.appendChild(oA);
li.appendChild(div);
li.appendChild(div2);
}
</script>
</body>
</html>

js简单的留言功能代码实例,这样的场景在实际项目中还是用的比较多的,关于js简单的留言功能代码实例就介绍到这了。

js简单的留言功能代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容