留言条.html .js来完成

Posted 2020-10-06 林水

let data = [{
   username: "张桑0",
   time: "2017-09-07 12:00:00",
   text: "留言文本内容。"
},{
   username: "张桑1",
   time: "2017-09-08 12:00:00",
   text: "留言文本内容。"
},{
   username: "张桑2",
   time: "2017-09-09 12:00:00",
   text: "留言文本内容。"
}];

render();
addBtn.addEventListener("click", () => {
   addMessage();
}, false)

content.addEventListener("keydown", (e) => {
   if(e.keyCode === 13){
      addMessage();
   }
}, false)

exhibit.addEventListener("click", (e) => {
   if(e.target.className === "removeBtn"){
      e.preventDefault();
      let i = e.target.getAttribute("_id");
      data.splice(i, 1);
   }
   render();
}, false)

function render(){
   exhibit.innerhtml = data.map((item, index) => {
      return `<div class="message">
               <div class="info">
                  <span>${item.username}</span>
                  <span>${item.time}</span>
               </div>
               <p>${item.text}</p>
               <div class="btn">
                  <a href="#" class="removeBtn" _id="${index}">删除</a>
               </div>
            </div>`
   }).join("");
}

function addMessage(){
   data.push({
      username: `张三${data.length}`,
      time: getNowTime(),
      text: content.value
   });
   content.value = "";
   render();
}

function getNowTime(){
   let date = new Date();
   let year = date.getFullYear();
   let month = date.getMonth() + 1;

   month = judgeTime(month);

   let day = date.getDate();
   let hours = date.getHours();
   let minutes = date.getMinutes();
   let seconds = date.getSeconds();

   let nowTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
   return nowTime;
}

function judgeTime(time){
   if(time < 10 && time > 0){
      time = "0" + time;
   }
   return time;
}