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来完成的更多相关文章

  1. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  2. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  3. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  6. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  9. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

随机推荐

  1. git pull因为主线分支问题解决

    方法1:如果你想保留刚才本地修改的代码,并把git服务器上的代码pull到本地(本地刚才修改的代码将会被暂时封存起来) git stashgit pull origin mastergit stash ...

  2. 贪心学院 scrapy爬虫

    生成爬虫 scrapy genspider 爬虫名 网址 打开调试用shell scrapy shell 网址 主体 stock.py # -*- coding: utf-8 -*- import r ...

  3. 19.通过MAPREDUCE 把收集数据进行清洗

    在eclipse软件里创建一个maven项目 jdk要换成本地安装的1.8版本的 加载pom.xml文件 <project xmlns="http://maven.apache.org ...

  4. Http 协议学习

    借助[小坦克:HTTP 协议教程] 1.HTTP协议是什么 协议是计算机在通信过程中必须共同遵守的规则,我的理解是类似所有汽车在行驶过程中必须共同遵守的交通规则一样. http协议叫超文本协议,是一种 ...

  5. vue axios拦截跳转

    第一步:添加需要拦截的页面 { path: '/control', name: 'Control', meta: { requireAuth: true }, 第二步:页面拦截 router.befo ...

  6. k8s-高可用架构设计

    docker的私有仓库harbor.容器化kubernetes部分组建.使用阿里云日志服务收集日志. 部署完成后,你将理解系统各组件的交互原理,进而能快速解决实际问题,所以本文档主要适合于那些有一定k ...

  7. Scalar Queries CodeForces - 1167F (计数,树状数组)

    You are given an array $a_1,a_2,…,a_n$. All $a_i$ are pairwise distinct. Let's define function $f(l, ...

  8. Graph、DFS、BFS

    Graph.java package Graph; import LinearLIst.bag.Bag; import edu.princeton.cs.algs4.In; public class ...

  9. 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?

    首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...

  10. 【原创】大叔经验分享(74)nginx对静态文件加速

    通过location配置 location ~ \.html$ { add_header 'Cache-Control' 'no-cache'; } location ~ \.(js|css|gif| ...