留言条.html .js来完成
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;
}
留言条.html .js来完成的更多相关文章
- 原生JS实现简单留言板功能
原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记:操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- JS正则表达式常用总结
正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...
随机推荐
- IT架构的本质
老僧三十年前未参禅时,见山是山,见水是水. 及至后来,亲见知识,有个入出,见山不是山,见水不是水. 而今得个休歇处,依前见山只是山,见水只是水. 参禅的三重境界在IT技术圈同样适用,初学者感叹每个产品 ...
- 插入排序的Python代码实现
是打扑克的时候了 那种按大小排序的扑克游戏 def insert_sort(arr): for i in range(1,len(arr)): for j in range(i,0,-1): #与左边 ...
- Similar String Groups
Two strings X and Y are similar if we can swap two letters (in different positions) of X, so that it ...
- kettle 创建作业发送邮件
1.创建作业 . 2. 发送邮件配置,测试邮件 发件地址可以使用的QQ.126.163等邮箱 smtp server的填写smtp.qq.com或者smtp.126.com等等都可以这里我用Q163邮 ...
- Oracle解决空表不导出
Select 'alter table '||table_name||' allocate extent;' from user_tables where num_rows=0 or num_rows ...
- SQLSERVER 去除字符串中特殊字符
原文:SQLSERVER 去除字符串中特殊字符 /*========================================================================== ...
- 【LOJ】#3121. 「CTS2019 | CTSC2019」无处安放
第一次有耐心去研究一道题答-- 以前看到题答要么扔要么就水能简单手玩出来的 1 2可以手玩出来,快乐! 4呢发现3 3比较格路,就把3 3都配了,一边带个4的除了4 4都塞满这么放进去,然后把一边带2 ...
- 第十三章 字符串(一)之 String
这一节来学习String的特性和方法. 一.String对象的不变性 不变性:String对象是由一个final char[] value 数组实现的,因此String对象是不可变的.任何看起来改变S ...
- Spring Boot 面试总结(一)
1.使用 Spring Boot 前景? 多年来,随着新功能的增加,spring变得越来越复杂.只需访问https://spring.io/projects页面,我们就会看到可以在我们的应用程序中使用 ...
- Vue 实例之事件 操作样式 (文本、事件、属性、表单、条件)指令
Vue 可以独立完成前后端分离式web项目的JavaScript框架 三大主流框架之一: Angular React Vue 先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲 ...