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简单的留言功能代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容