留言条.html .js来完成
2024-10-06 22:03:22
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;
}
最新文章
- TF-IDF算法
- BZOJ 2588: Spoj 10628. Count on a tree 树上跑主席树
- 跟着百度学PHP[7]会话控制(session与cookie) 1.cookie的设置
- 开发语言大PK:php和Java哪个更好?
- Linux下网络流量实时监控工具大全
- 规则集Set与线性表List性能分析
- linux下 ls -l 命令显示结果每一列代表什么意思
- C/C++静态数组与动态数组的区别
- Resnet论文翻译
- js面向对象学习
- 史上最简单的Docker入门教程
- Vue相关文章
- 安装SQL Server时,提示VS Shell 安装失败,退出代码为 1638。
- sizeof strlen区别于联系
- flask的安装
- 【5】Builder模式(构建者模式)
- Spring Boot—17MongoDB
- Eltwise层解析
- java原生序列化和Kryo序列化性能比较
- DOS cmd - how to ping a remote host with specified port