JS实现留言板功能


Posted in Javascript onJune 17, 2017

每天一个JS 小demo之留言板。主要知识点:DOM方法的理解和运用

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 {
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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
JS获取当前日期和时间的简单实例
Nov 19 Javascript
js取值中form.all和不加all的区别介绍
Jan 20 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
May 16 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
javascript实现函数柯里化与反柯里化过程解析
Oct 08 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 Javascript
利用vscode编写vue的简单配置详解
Jun 17 #Javascript
JavaScript用二分法查找数据的实例代码
Jun 17 #Javascript
JS实现新建文件夹功能
Jun 17 #Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 #Javascript
JS实现商品筛选功能
Aug 19 #Javascript
node文件上传功能简易实现代码
Jun 16 #Javascript
详解webpack 多入口配置
Jun 16 #Javascript
You might like
深入理解PHP原理之异常机制
2010/08/21 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
JavaScript Event学习补遗 addEventSimple
2010/02/11 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
Vue.js组件高级特性实例详解
2018/12/24 Javascript
Vue关于组件化开发知识点详解
2020/05/13 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[02:33]2014DOTA2 TI每日综述 LGD涉险晋级DK闯入胜者组
2014/07/14 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
理解Python中函数的参数
2015/04/27 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
Java如何格式化日期
2012/08/07 面试题
小学阳光体育活动总结
2014/07/05 职场文书
再婚婚前财产协议书范本
2014/10/19 职场文书
小学教师个人总结
2015/02/05 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
JS中如何优雅的使用async await详解
2021/10/05 Javascript