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跨浏览器的属性判断方法
Mar 16 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
Oct 16 Javascript
JavaScript函数模式详解
Nov 07 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
浅谈实现vue2.0响应式的基本思路
Feb 13 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
生产制造追溯系统之再说条码打印
Jun 03 Javascript
小程序外卖订单界面的示例代码
Dec 30 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函数实现判断是否移动端访问
2015/03/03 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
js实现的倒计时按钮实例
2015/06/24 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
2017/01/17 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
2017/07/28 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
2020/04/27 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python实现的登陆Discuz!论坛通用代码分享
2014/07/11 Python
Python 26进制计算实现方法
2015/05/28 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
python3实现逐字输出的方法
2019/01/23 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
eclipse创建python项目步骤详解
2019/05/10 Python
Python OpenCV 使用滑动条来调整函数参数的方法
2019/07/08 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
罗技美国官网:Logitech美国
2020/01/22 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
商业融资计划书
2014/04/29 职场文书
实验室标语
2014/06/21 职场文书
综治工作汇报材料
2014/10/27 职场文书