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 ...
随机推荐
- LeetCode（6）ZigZag Conversion
题目如下: C++代码: #include <iostream> #include <string> using namespace std; class Solution { ...
- GoldenGate 反向切换步骤
1 事先配置好反向复制链路: 2 停止源端的应用程序; 3 确认源端Capture已捕获所有的Redo信息: GGSCI>info all GGSCI>info ext_app 4 确认源 ...
- [笔记-统计学习方法]感知机模型(perceptron) 原理与实现
前几天认把感知机这一章读完了,顺带做了点笔记 现在把笔记做第三次的整理 (不得不说博客园的LaTex公式和markdown排版真的不太舒服,该考虑在服务器上建一个博客了) 零.总结 适用于具有线性可分 ...
- django orm 时间处理
说明 datetime 类型赋值: 数据库设置时区为:utc 系统设置时区为:'Asia/Shanghai' 1.赋值为:‘2019-04-24 15:00:00’ 数据库的结果为 ‘ ...
- .ashx 实现自动路由和参数填充
在Mvc中访问控制器,参数填充和路由控制都非常方便,但之前项目用的是webFrom,和js交互的ashx页面,路由非常麻烦要根据传进来关键字来做switch,参数填充更坑,要一个一个去form中取出来 ...
- 【Round #36 (Div. 2 only) C】Socks Pairs
[题目链接]:https://csacademy.com/contest/round-36/task/socks-pairs/ [题意] 给你n种颜色的袜子,每种颜色颜色的袜子有ai只; 假设你在取袜 ...
- 安卓Gallery配合ImageSwitcher不显示图片
Gallary装的是缩略图(thumb),ImageSwitcher装的是大图. 不显示图片的一个可能原因是gallery没设置代理器,另一个原因是没使用相对布局. GalleryActivity.j ...
- 网页加速之Chromium 预载入 Prerendering
前一篇博文已经介绍通过prefetch预先载入网页的资源来提升网页载入速度,以下我们一起来看一下网页加速之chromium prerendering.在介绍prerendering之前,先介绍两个概念 ...
- Fragment的实际开发中总结（二）
在实际项目的开发过程Fragment的情况越来越多.大家肯定须要遇到过Fragment被销毁重建的情况. 结合自己在项目开发的一点总结和学习开源项目的代码.继续分享自己对Fragment的一点总结. ...
- STL_算法_局部排序(partial_sort、partial_sort_copy)
C++ Primer 学习中. . . 简单记录下我的学习过程 (代码为主) /***************************************** // partial_sort(b, ...