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 相关文章推荐
Javascript Object.extend
May 18 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
用JavaScript修改CSS属性的代码
May 06 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
Jul 17 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
jQuery调用ajax请求的常见方法汇总
Mar 24 Javascript
老司机带你解读jQuery插件开发流程
May 16 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
JS点击缩略图整屏居中放大图片效果
Jul 04 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
JavaScript的一些小技巧分享
Jan 06 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 zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
浅谈JavaScript中小数和大整数的精度丢失
2016/05/31 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
2018/10/10 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python之array赋值技巧分享
2019/11/28 Python
django列表筛选功能的实现代码
2020/03/27 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
澳大利亚领先的美容护肤品零售商之一:SkincareStore
2018/01/22 全球购物
精彩的大学生自我评价
2013/11/17 职场文书
售后专员岗位职责
2013/12/08 职场文书
个人自我鉴定总结
2014/03/25 职场文书
幼儿园小班教师寄语
2014/04/03 职场文书
总经理岗位职责范本
2015/04/01 职场文书
刑事申诉状范文
2015/05/20 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
实操Python爬取觅知网素材图片示例
2021/11/27 Python