每天一个JS 小demo之留言板。主要知识点：DOM方法的理解和运用
<!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 {
box-shadow: 0 0 5px rgba(0,0,0,.5)
}
</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 小demo之留言板。主要知识点：DOM方法的理解和运用的更多相关文章
- node.js小案例_留言板
一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示: 2.案列源码:https://github.com/45612 ...
- 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
@charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
- 每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作
以下是简易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
- 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之商品筛选。主要知识点：DOM方法综合运用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 每天一个JS 小demo之日历制作。主要知识点：日期函数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
随机推荐
- 【原创】10万条数据采用存储过程分页实现（Mvc+Dapper+存储过程）
有时候大数据量进行查询操作的时候,查询速度很大强度上可以影响用户体验,因此自己简单写了一个demo,简单总结记录一下: 技术:Mvc4+Dapper+Dapper扩展+Sqlserver 目前主要实现 ...
- 如何有效快速提高Java服务端开发人员的技术水平？
我相信很多工作了3-5年的开发人员都会经常问自己几个问题: 1.为什么总是感觉技术没有质的提高? 2.如何能够有效和快速的提高自身的技术水平? 3.如何进入到一个牛逼的大公司,认识牛逼的人? 这篇文章 ...
- css3 felx布局
一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. [css] .box ...
- bzoj4766 文艺计算姬
Description "奋战三星期,造台计算机".小W响应号召,花了三星期造了台文艺计算姬.文艺计算姬比普通计算机有更多的艺术细胞.普通计算机能计算一个带标号完全图的生成树个数, ...
- linux性能之iostat
在使用linux系统的过程中,总是可能需要当前io性能的状态信息是怎么样?这里就就是一下iostat,可以通过iostat来初步查看io的状态信息. 1.常用方式 iostat -xdk 1 10 或 ...
- css写出三角形（兼容IE）
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- HTML5的article和section的区别
内容区块是指将HTML页面按逻辑分割后的单位.对于页面网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块. article元素 article元素代表文档.页面或 ...
- java虚拟机总结
jvm内存模型 u 程序计数器 u Java栈(虚拟机栈) u 本地方法栈 u Java堆 u 方法区及其运行时常量池 垃圾回收机制 u 新生代和老年代 u 参数设置 u 垃圾回收(M ...
- 为程序猿正名，MM们，你们为什么要找一个程序猿男票？【原创】
前言 免责声明:这篇文章关于什么?六一儿童节马上就要到了,作为一个前端攻城师,自我感觉效率还可以,老早已把任务搞完,页面布局和前端编码高效按时交付,呵呵.趁有时间,写写文章娱乐一下.MM们,请不要拿起 ...
- 智能指针剖析（上）std::auto_ptr与boost::scoped_ptr
1. 引入 C++语言中的动态内存分配没有自动回收机制,动态开辟的空间需要用户自己来维护,在出函数作用域或者程序正常退出前必须释放掉. 即程序员每次 new 出来的内存都要手动 delete,否则会造 ...