留言条.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+) ...
随机推荐
- 【转帖】linux sort,uniq,cut,wc,tr,xargs命令详解
linux sort,uniq,cut,wc,tr,xargs命令详解 http://embeddedlinux.org.cn/emb-linux/entry-level/201607/21-5550 ...
- DAO语句如何定义属性类型
字体设置:代码 14px 文字 幼圆 15px public interface IAddressDAO { //添加地址 public boolean doCreate(Address addres ...
- Android开发自定义View
Android中View组件的作用类似于Swing变成中的JPanel,它只是一个空白的矩形区域,View组件中没有任何内容.对于Android应用的其他UI组件来说,它们都继承了View组件,然后在 ...
- Codeforces Educational Codeforces Round 3 E. Minimum spanning tree for each edge 树上倍增
E. Minimum spanning tree for each edge 题目连接: http://www.codeforces.com/contest/609/problem/E Descrip ...
- pycharm虚拟环境的搭建
目录 优点 windows 安装 配置虚拟环境管理器工作目录 MacOS.Linux 安装 工作文件 配置 使用 pycharm使用 新建项目 添加环境 使用环境 优点 1.使不同应用开发环境相互独立 ...
- python安装OpenCV后import cv2报错解决办法
现在python安装完成后,运行pip install opencv-python安装成功后,import cv2时会失败 看到有人给出下载https://www.lfd.uci.edu/~gohlk ...
- 【Git的基本操作九】ssh免密登录
SSH免密登录 1. 进入用户家目录 cd ~ 2. 删除原有的 .ssh 目录 rm -r .ssh 3. 运行命令生成 .ssh 目录 ssh-keygen -t rsa -C github或gi ...
- string字符串长度和字节长度问题
string str = "abcdef 安安安"; int i = str.Length; byte[] bt = System.Text.Encoding.Default.Ge ...
- Html-自适应
自适应 使网页能适应不同终端设备的技术.原理是通过检测视口分辨率来判断是什么终端的,PC,手机还是平板. 做自适应的网页时,需要在代码中加入“祖传代码”,即通用代码. 这是在头部head引入的: &l ...
- Java: For循环那些事
title: Java-for循环那些事 toc: true date: 2019-05-21 10:28:44 categories: Java tags: - Tips --- Java for循 ...