<!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. ArrayList 冷门方法

    以下代码片都是 jdk1.8 ArrayList中的官方代码 /** * Constructs a list containing the elements of the specified * co ...

  2. 某马-某淘商城的day01--->分析，工程搭建，tomcat插件启动工程，svn，反思

    -1:为什么还要写某马的某淘商城呢? 答:万物更新,季节交替.新人总把旧人换.所以呢,前人写了N多遍的东西,我们依旧在学,所以下决心写某马的某淘商城.(也因为在学校还没找工作,所以找个相对长期的事情做 ...

  3. 【珍藏】高性能IO模型浅析

    服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking IO):默认创建的s ...

  4. shell中的Mysql查询

    1 #!/bin/bash 2 #查询 3 echo -e  4 for i in `cat id.txt` 5 do 6 A=`mysql -h10 -uw -p2012 -Ne "sel ...

  5. OpenMP 入门教程

    前两天(其实是几个月以前了)看到了代码中有 #pragma omp parallel for 一段,感觉好像是 OpenMP,以前看到并行化的东西都是直接躲开,既然躲不开了,不妨研究一下: OpenM ...

  6. 从性能角度看react组件拆分的重要性

    React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...

  7. C#基础知识-流程控制的应用（四）

    流程控制我们在编程中运用到的地方非常的多,在上篇中仅仅只是简单的介绍每一种的使用,并没有运用到实例中,很难去理解它真正的作用.下面我们将实际的运用流程控制的代码写一些实例相关的程序,加深对流程控制的理 ...

  8. Oracle清除数据库中长时间占用资源的非活动的会话

    1.启动资源计划 alter system set resource_limit=true scope=spfile; 2.设置非活动回话十五分钟断开,释放资源 alter profile defau ...

  9. JavaScript ,Python,java,Go系列算法之选择排序

    常见的内部排序算法有:插入排序.希尔排序.选择排序.冒泡排序.归并排序.快速排序.堆排序.基数排序等. 用一张图概括:   选择排序 选择排序是一种简单直观的排序算法,无论什么数据进去都是O(n2) ...

  10. VR全景：互联网与实体店的完美结合

     VR元年已过,VR项目.VR创业潮转为理性,VR行业分为两个方向:硬件和内容.硬件又分为VR头显和辅助设备,内容又分为VR全景和VR虚拟内容,如游戏.娱乐.根据行业划分为VR+购物,VR+教育,VR ...