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 ...
随机推荐
- Windows Server 2012 r2 显示计算机图标
在 Windows Server 2012 R2 系统中,微软取消了服务器桌面个性化选项,如何重新调出配置界面,在桌面上显示计算机图标,本文为大家介绍一下! Win2012我的电脑怎么显示到桌面? 一 ...
- Python组织文件 实践：将带有美国风格日期的文件改名为欧洲风格日期
描述:假设有这样一个任务,你需要将文件名中含有美国风格日期(MM-DD-YYYY)的部分更换为欧洲风格日期(DD-MM-YYYY),并且需要你处理的文件多达上千个 分析:检查当前工作目录的所有文件名, ...
- POJ 1723 SOLDIERS
SOLDIERS Time Limit: 1000ms Memory Limit: 10000KB This problem will be judged on PKU. Original ID: 1 ...
- PatentTips - Posting interrupts to virtual processors
BACKGROUND Generally, the concept of virtualization in information processing systems allows multipl ...
- 洛谷 P1407 工资
P1407 工资 题目描述 有一家世界级大企业,他们经过调查,发现了一个奇特的现象,竟然在自己的公司里,有超过一半的雇员,他们的工资完全相同! 公布了这项调查结果后,众多老板对于这一现象很感兴趣,他们 ...
- 华为：一张图看懂 HBase
来自为知笔记(Wiz)
- iOS数字媒体开发浅析
概述 自然界中的所有看到的听到的都是模拟信号,模拟信号是随时间连续变化,然而手机电脑等信息都属于数字媒体,它们所呈现的内容就是把自然界中这些模拟信号转换成数字信号然后再传递给我们.数字信号不是连续的是 ...
- BZOJ2895: 球队预算
[传送门:BZOJ2895] 简要题意: 在一个篮球联赛里,有n支球队,球队的支出是和他们的胜负场次有关系的,具体来说,第i支球队的赛季总支出是Ci*x^2+Di*y^2,Di<=Ci.(赢得多 ...
- OSSIM（开源安全信息管理系统）在企业网络管理中的应用
国内首个Ossim技术交流群(179084574),欢迎加入我们 参与51CTO[第242期]OSSIM,企业信息安全管理利器热门技术讨论 650) this.width=650;" bor ...
- TwinCAT 3中基于UDP协议通讯的C++实现
因为项目需要,学习了TwinCAT3中使用UDP协议进行通讯的基本知识.这个做个简单的笔记,方便以后查询. 1 概述 倍福为了实现从实时环境中直接访问网卡(network cards)专门提供了一个函 ...