<!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方法的理解和运用的更多相关文章

  1. node.js小案例_留言板

    一.前言 通过这个案例复习: 1.node.js中模板引擎的使用 2.node.js中的页面跳转和重定向 二.主要内容 1.案列演示:  2.案列源码:https://github.com/45612 ...

  2. 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用

    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...

  4. 每天一个JS 小demo之个人信息添加。主要知识点：DOM操作中的表格操作，节点操作

    以下是简易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...

  5. 每天一个JS 小demo之新建文件夹。主要知识点：DOM方法的综合运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  6. 每天一个JS 小demo之商品筛选。主要知识点：DOM方法综合运用

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  7. 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  8. 每天一个JS 小demo之日历制作。主要知识点：日期函数

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 每天一个JS 小demo之“随机”抽奖。主要知识点：Math函数，数组方法，递归

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

随机推荐

  1. ECharts 实现人民的名义关系图谱 代码开源

    1.什么是ECharts ECharts是百度开源的纯 Javascript 图表库,目前开源可以与highcharts相匹敌的一个图表库,相信有很多国内用户使用. 官网 http://echarts ...

  2. python基本数据类型——int

    一.int的范围 python2: 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1: 在64位系统上,整数的位数为64位,取值范围为-2**63-2**63-1: pyth ...

  3. 分分钟带你玩转 Web Services【2】CXF

    在实践中一直在使用 JAX-WS 构建 WebService 服务,服务还是非常稳定.高效的. 但还是比较好奇其他的 WebService 开源框架,比如:CXF/Axis2/Spring WS等. ...

  4. .net 做工作流时，生成项目后工具箱里有关工作流的东西不显示解决方法

    在做工作流模块时,遇到一个比较棘手的问题,那就是生成项目后工具箱里有关工作流的东西不显示,这个问题令人百思不得其解,经过查阅英文网站,终于找到解决方法: 把项目中的建模项目移除掉,再重新生成,奇迹出现 ...

  5. 作死上CODEVS，青铜题

    题面:输入一列整数,输出它们的总和.最大值.最小值.并从大到小输出. 先上一波伪代码,认真地做一波数组排序题. #include<stdio.h> #include<math.h&g ...

  6. ASP.NET WebForm

    ASP.NET WEBFORM Aspx aspx文件(新建项→Web窗体) .在aspx中可以使用<%=表达式%>的方式在页面的当前位置输出表达式(表达式至少要用protected级别, ...

  7. 设置共享目录（主机win7，虚拟机Ubuntu）

    1.安装增强功能包 启动虚拟机后,在 设备 -> 分配光驱 选择VBoxGuestAdditions.iso增强包镜像(在virtualbox安装目录下) 在虚拟机中挂载光驱镜像: #mkdir ...

  8. zabbix监控rds

    问题:使用zabbix监控rds,用之前的脚本,执行总是会有密码安全提示: [root@iZ25m1box8cZ alertscripts]# sh rds.sh Uptime mysqladmin: ...

  9. poj 1321 棋盘问题 简单DFS

    题目链接:http://poj.org/problem?id=1321 很久没有敲搜索了啊,今天敲了个水题练练手,哈哈.... 题目大意: 就是求在n*n的方格上放置k个棋子的方案数 代码: #inc ...

  10. Java IO详解（二)------流的分类

    一.根据流向分为输入流和输出流: 注意输入流和输出流是相对于程序而言的. 输出:把程序(内存)中的内容输出到磁盘.光盘等存储设备中      输入:读取外部数据(磁盘.光盘等存储设备的数据)到程序(内 ...