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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
javascript 事件处理、鼠标拖动效果实现方法详解
May 11 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
微信小程序点击view动态添加样式过程解析
Jan 21 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
php数组(array)输出的三种形式详解
2013/06/05 PHP
php class类的用法详细总结
2013/10/17 PHP
PHP的mysqli_ssl_set()函数讲解
2019/01/23 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
vue移动端项目缓存问题实践记录
2018/10/29 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python OS模块常用函数说明
2015/05/23 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python django model联合主键的例子
2019/08/06 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
设计总监岗位职责
2013/12/07 职场文书
三年级数学教学反思
2014/01/31 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
党纪处分决定书
2015/06/24 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL