每天一个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"& ...
随机推荐
- Virtualbox mac版centos7.2 安装共享文件夹
因为用的是mac本,在自己电脑上用virtualbox安装了centos7.2 虚拟机,为了实现与本机交换文件,需要用到贡享文件夹功能. 网上搜的时候多是windows版的,所以自己写一个mac版的. ...
- python基本数据类型——list
一.创建列表: li = [] li = list() name_list = ['alex', 'seven', 'eric'] name_list = list(['alex', 'seven', ...
- 用Pyton玩转数据练习题---第二周
找前5个默尼森数.P是素数且M也是素数,并且满足等式M=2**P-1,则称M为默尼森数.例如,P=5,M=2**P-1=31,5和31都是素数,因此31是默尼森数. # coding:utf-8 im ...
- 使用AF_INET实现点对点的通信示例
作者:Younger Liu,本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 1. 客户端(发送方) 操作流如下: (1) 使用AF_INET协议簇, ...
- 如何运行一个vue工程
在师兄的推荐下入坑vue.js ,发现不知如何运行GitHub上的开源项目,很尴尬.通过查阅网上教程,成功搭建好项目环境,同时对前段工程化有了朦朦胧胧的认知,因此将环境搭建过程分享给大家. 首先, ...
- HDU_1009_FatMouse' Trade
FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- [笔记]NumPy基础操作
学机器学习做点小笔记,都是Python的NumPy库的基本小操作,图书馆借的书看到的,怕自己还了书后忘了,就记下来. 一般习惯导入numpy时使用 import numpy as np ,不要直接im ...
- struts和struts2的区别
1.Structs2简介和Structs2开发环境搭建 一.Structs2简介: 1.什么是Struct2? 著名的SSH三大框架分别为:表现层(Structs).业务逻辑层(Spring),持久化 ...
- 仿中关村win8频道(win8.zol.com.cn)下的tab效果
最近觉得中关村win8频道下的那个Tab效果很好看. 一时兴起就自己做了一个.觉得还蛮不错的,特地来给大家分享一下.以下是相关的HTML页面写法: <div class="popula ...
- 连锁反应confirm
<script> function del(){ var flag = confirm("你真要删除么?"); if( flag ){ alert("我已被你 ...