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 ...
随机推荐
- yii2.0缓存篇之文件缓存
文件缓存: 在 frontend/config/main.php/components数组下添加: 'cache'=>[ 'class'=>'yii\caching\FileCa ...
- Ubuntu 环境下的mysql 远程访问，redis 远程访问和设置密码 ，mongo 安装 ，设置用户密码，开启远程访问
MySQL远程访问 1.编辑mysql配置文件,把其中bind-address = 127.0.0.1注释了 vi /etc/mysql/mysql.conf.d/mysqld.cnf 2.使用roo ...
- 【Henu ACM Round#20 F】 Arthur and Brackets
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 所给的li,ri是左括号从左到右的顺序给的. (且注意长度是2*n 现在我们先把第一个左括号放在第1个位置. 然后考虑第二个位置. ...
- Opencv YAML和XML格式文件操作详解
本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/47660943 本文参考Opencv 2 ...
- 洛谷 P2386 放苹果
P2386 放苹果 题目背景 (poj1664) 题目描述 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分发(5,1,1和1,1,5是同一种方法) 输入输出格式 输入 ...
- 网络流 HDU 3549 Flow Problem
网络流 HDU 3549 Flow Problem 题目:pid=3549">http://acm.hdu.edu.cn/showproblem.php?pid=3549 用增广路算法 ...
- Hadoop HDFS (4) Hadoop Archives
用HDFS存储小文件是不经济的,由于每一个文件都存在一个block里,每一个block的metadata又在namenode的内存里存着,所以,大量的小文件.会吃掉大量的namenode的内存.(注意 ...
- iOS 7 UI 过渡指南 - 支持续 iOS 6（iOS 7 UI Transition Guide - Supporting iOS 6）
iOS 7 UI Transition Guide Preparing for Transition Before You Start Scoping the Project Supporting i ...
- VS中，打开文件时自动定位到目录树中
工具--选项--项目和解决方案--常规--在解决方案资源管理器中跟踪活动项 这样就能快速跟踪了.
- JSP脚本连接数据库
入门 简单的jsp文件 <%-- Created by IntelliJ IDEA. User: e550 Date: 2017/1/9 Time: 23:24 To change this t ...