js简易留言板
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Document</title> | |
| <style type="text/css"> | |
| .wrap { | |
| width: 400px; | |
| margin: 30px auto; | |
| } | |
| textarea { | |
| display: block; | |
| width: 100%; | |
| height: 60px; | |
| } | |
| input { | |
| display: block; | |
| width: 60%; | |
| margin: 15px auto; | |
| } | |
| li { | |
| padding: 5px 10px; | |
| position: relative; | |
| word-break: break-all; | |
| } | |
| .red { | |
| color: #000; | |
| background: #f1f1f1; | |
| } | |
| .pink { | |
| color: #000; | |
| background: #ccc; | |
| } | |
| a { | |
| position: absolute; | |
| right: 0; | |
| top: -20px; | |
| background: yellow; | |
| color: #fff; | |
| } | |
| #list { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| font: 14px/26px "宋体"; | |
| } | |
| .clos { | |
| position: absolute; | |
| top: 0; | |
| right: -50px; | |
| width: 50px; | |
| color: #fff; | |
| background: #000; | |
| padding: 5px 0; | |
| text-decoration: none; | |
| text-align: center; | |
| } | |
| .clos:hover { | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| window.onload = function(){ | |
| var btn = document.querySelector('input'); | |
| var text = document.querySelector('textarea'); | |
| var list = document.querySelector('#list'); | |
| var colors = ["red","pink"]; | |
| var nub = 0; | |
| btn.onclick = function(){ | |
| if(text.value.trim() == ""){ | |
| alert("输入内容不能为空"); | |
| return false; | |
| } | |
| var li = document.createElement("li"); | |
| li.innerHTML = text.value; | |
| // li.className = colors[nub%colors.length]; | |
| /* 判断a标签已经被添加，就让a标签显示出来，否则就添加 */ | |
| if(list.children[0]&&list.children[0].className=="red"){ | |
| li.className = "pink"; | |
| } else { | |
| li.className = "red"; | |
| } | |
| var a = null; | |
| li.onmouseover = function(){ | |
| if(a) { | |
| a.style.display = "block"; | |
| } else { | |
| a = document.createElement("a"); | |
| a.href = "javascript:;"; | |
| a.className = "clos"; | |
| a.innerHTML = "删除"; | |
| a.onclick = function (){ | |
| list.removeChild(this.parentNode); | |
| }; | |
| this.appendChild(a); | |
| } | |
| }; | |
| li.onmouseout = function(){ | |
| a.style.display = "none"; | |
| }; | |
| list.insertBefore(li,list.children[0]); | |
| text.value = ""; | |
| nub++; | |
| }; | |
| }; | |
| </script> | |
| </head> | |
| <body> | |
| <div> | |
| <div class="wrap"> | |
| <textarea id="text"></textarea> | |
| <input type="button" value="留言"> | |
| <ul id="list"></ul> | |
| </div> | |
| </body> | |
| </html> | |
js简易留言板的更多相关文章
- DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例
1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...
- 原生node实现简易留言板
原生node实现简易留言板 学习node,实现一个简单的留言板小demo 1. 使用模块 http模块 创建服务 fs模块 操作读取文件 url模块 便于path操作并读取表单提交数据 art-tem ...
- php实现简易留言板效果
首先是Index页面效果图 index.php <?php header('content-type:text/html;charset=utf-8'); date_default_timezo ...
- JSP简易留言板
写在前面 在上篇博文JSP内置对象中介绍JSP的9个内置对象的含义和常用方法,但都是比较理论的知识.今天为大家带来一个小应用,用application制作的简易留言板. 包括三个功能模块:留言提交.留 ...
- Flask学习之旅--简易留言板
一.写在前面 正所谓“纸上得来终觉浅,方知此事要躬行”,在看文档和视频之余,我觉得还是要动手做点什么东西才能更好地学习吧,毕竟有些东西光看文档真的难以理解,于是就试着使用Flask框架做了一个简易留言 ...
- 微信小程序实现简易留言板
微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...
- js制作留言板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js 实现简易留言板功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue实现简易留言板
首先引入vue.js <script src="vue.js"></script> 布局 <div id="div"> &l ...
随机推荐
- P3157 [CQOI2011]动态逆序对 CDQ分治
一道CDQ分治模板题简单来说,这道题是三维数点对于离线的二维数点,我们再熟悉不过:利用坐标的单调递增性,先按更坐标排序,再按纵坐标排序更新和查询时都直接调用纵坐标.实际上,我们是通过排序将二维中的一维 ...
- windows server 打开 FTP 服务器上的文件夹时发生错误。请检查是否有权限访问该文件夹。
解决方案1: 打开高级安全windows防火墙,设置出入站规则. 然后,再打开windows防火墙界面,点击左上角“允许程序或功能通过windows防火墙”,勾选上设置的出入站名称和FTP服务器. 如 ...
- URAL 1513. Lemon Tale(简单的递推)
写几组数据就会发现规律了啊. .但是我是竖着看的.. .还找了半天啊... 只是要用高精度来写,水题啊.就当熟悉一下java了啊. num[i] = 2*num[i-1]-num[i-2-k]. 15 ...
- 计蒜客第一场A
#include <cstdio> #include <iostream> #include <cstring> using namespace std; char ...
- iOS经常使用设计模式——工厂方法（简单工厂模式，工厂方法模式， 抽象工厂模式）
1. 简单工厂模式 怎样理解简单工厂,工厂方法. 抽象工厂三种设计模式? 简单工厂的生活场景.卖早点的小摊贩.他给你提供包子,馒头,地沟油烙的煎饼等,小贩是一个工厂.它生产包子,馒头,地沟油烙的煎饼. ...
- 如何测试WCF Rest
使用SoapUI 1.新建一个rest项目 2.双击上图中的Request1 查询的时候,Method选择post resource的地方要调整到对应的方法 查询的内容是用json格式发送 查询的的结 ...
- git帮助命令
git帮助命令 零.自己实例 cd D://software/code/PHP/phpStudy/PHPTutorial/WWW/github/m_Orchestrate git checkout - ...
- 分享js中的 sort 另一种用法
// 看上去正常的结果: ['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft']; // apple排 ...
- 使用js实现简单放大镜的效果
实现原理:使用2个div,里面分别放大图片和小图片,在小图片上应该还有一个遮罩层,通过定位遮罩层的位置来定位大图片的相对位置,而且,遮罩层的移动应该和大图片的移动方向相反 关键: 大图片和小图片大小比 ...
- 开发板ping得通本地，但是不能上网
在3531D的开发板上面接入LAN7500的USB转以太网口,加载完驱动后. 然后开启eth1 查看一下ifconfig,发现没有ip,配置一下ip 直接ping本地发现可以ping得通,代表链路是连 ...