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. Linux-android 模拟器使用

    1.把sdcard挂载到一个文件夹 mkdir sdcard sudo mount -o loop sdcard.img sdcard 日志在sdcard下lm-kill文件下查看 注解: http: ...

  2. Ubuntu更换科大源

    更换科大源 方案一:在命令行输入 sudo gedit /etc/apt/sources.list ,打开系统自带源文件. 将文件内源删除,更换为以下科大源: deb http://mirrors.a ...

  3. Jmeter之断言(响应断言,断言持续时间)

    断言是测试环节中,十分重要的一节. 响应结果是否正确,可以通过断言判断,无需人工确认. 1.为请求添加断言 常使用:响应断言>Bean Shell断言>断言持续时间 2.响应断言 ●常用来 ...

  4. Codeforces1263D-Secret Passwords

    题意 给n个字符串,两个字符串之间如果有相同的字符,那么两个就等价,等价关系可以传递,问最后有多少个等价类. 分析 考虑并查集或者dfs联通块,如果是并查集的话,对于当前字符串的某个字符,肯定要和这个 ...

  5. 并不对劲的CF480E:Parking Lot

    题目大意 有一个\(n\times m\)的网格,每个位置是黑色或者白色.\(k\)个操作,每个操作是将一个白格子染黑,操作后输出当前最大的白色正方形的边长.\(n,m,k\leq 2\times 1 ...

  6. 20-Perl 正则表达式

    1.Perl 正则表达式正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等.Pe ...

  7. sequelize学习笔记

    示例: const Sequelize = require('sequelize'); // 建立连接 const sequelize = new Sequelize('test', 'root', ...

  8. C++内存分配和分区

    1.分配方式 静态分配: 静态区(全局区),分配全局变量.静态变量优先于main函数. 动态分配: (1)自动分配:栈区(2)手动分配:堆区,(malloc,free) (new,delete) 2. ...

  9. warning LNK4076: 无效的增量状态文件“../×××.ilk”;正在非增量链接

      VS编译警告:warning LNK4076: 无效的增量状态文件“../×××.ilk”;正在非增量链接 解决方法:删除程序提示的输出目录的×××.ilk,重新编译,即可

  10. Python中文分词组件 jieba

    jieba "结巴"中文分词:做最好的Python中文分词组件 "Jieba" Feature 支持三种分词模式: 精确模式,试图将句子最精确地切开,适合文本分 ...