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 ...
随机推荐
- spring data jpa实体类映射配置
@Entity:用来标志实体类,知名这是一个和数据库表映射的实体类 @Id注解指明这个属性映射为数据库的主键 @GeneratedValue注解默认使用主键生成方式为自增,hibernate会自动生成 ...
- Linux学习之socket编程(二)
Linux学习之socket编程(二) 1.C/S模型——UDP UDP处理模型 由于UDP不需要维护连接,程序逻辑简单了很多,但是UDP协议是不可靠的,实际上有很多保证通讯可靠性的机制需要在应用层实 ...
- ECNUOJ 2147 字符环
字符环 Time Limit:1000MS Memory Limit:65536KBTotal Submit:562 Accepted:146 Description 字符环:就是将给定的一个字符串 ...
- UVA10269 Adventure of Super Mario(Floyd+DP)
UVA10269 Adventure of Super Mario(Floyd+DP) After rescuing the beautiful princess, Super Mario needs ...
- Raphaeljs入门到精通(一)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- android-继承BaseAdapter--自己定义适配器,getView运行多次的解决方法
定义的getView运行多次的ListView布局: <ListView android:id="@+id/lv_messages" android:layout_width ...
- 封装html代码块到js函数中
有时候想把公共的html封装起来,怎么处理呢? 好多页面都用到,不可能每个页面都写,这样就会有冗余,并且不好统一处理. 那就用js来重构html吧. 代码案例如下: <footer class= ...
- vue --- axios发post请求后台接收不到参数的三种解决方案
最近用vue 做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况: 后来仔细对比发现axios传值是这样的: 而 ajax 传值是这样的: 一个 Request Paylo ...
- 外连接OUTER JOIN(三十五)
外连接OUTER JOIN LEFT [OUTER] JOIN,左外连接 显示左表的全部记录及右表符合连接条件的记录 下面我们来演示一下,操作命令及部分结果如下: SELECT goods_id, ...
- spring-security-oauth2注解详解
spring-security-oauth2支持的注解有: 1.EnableOAuth2Client 适用于使用spring security,并且想从Oauth2认证服务器来获取授权的web应用环境 ...