JS实现简易留言板特效


Posted in Javascript onDecember 23, 2019

本文实例为大家分享了JS实现留言板特效的具体代码,供大家参考,具体内容如下

知识点

1.textarea 大段输入框
2.value获取输入框的值
3.innerHTML所用东西;innerText文本
4.insertBefore在某个标签之前插入

运行效果

JS实现简易留言板特效

JS实现简易留言板特效

JS实现简易留言板特效

JS实现简易留言板特效

JS实现简易留言板特效

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  *{margin: 0;padding: 0;list-style: none;}
  #box{width: 800px;border: 1px solid #ccc;
   margin:100px auto;padding: 20px}
  #my_textarea{width: 80%;height: 120px;font-size: 20px}
  .box-top{margin-bottom: 20px;}
  #ul li{border-bottom: 1px dashed #ccc;color: red;line-height: 44px}
  #ul li a{float: right;}
 </style>
</head>
<body>
<div id="box">
 <div class="box-top">
  <label for="my_textarea">发表评论
   <textarea name="my_textarea" id="my_textarea" cols="30" rows="10"></textarea>
  </label>
  <button id="btn">发表</button>
 </div>
 <ul id="ul"></ul>
</div>
<script>
 window.addEventListener('load',function (ev) {
  $('btn').addEventListener('click',function (ev1) {
   var my_textarea = $('my_textarea');
   // 1. 获取输入框中的内容
   var content = my_textarea.value;

   // 2. 判断
   if (content.length===0){
    alert('请输入评论的内容');
    return;
   }

   // 3. 创建li标签放入ul
   var li = document.createElement('li');
   var ul = $('ul');
   li.innerHTML = content + '<a href="javascript:;" rel="external nofollow" >删除</a>'
   ul.insertBefore(li,ul.children[0]);

   // 4. 清楚输入框内容
   my_textarea.value = '';
   
   // 5. 删除评论
   var remove = ul.getElementsByTagName('a');
   for (var i = 0; i < remove.length; i++) {
    var r = remove[i];
    r.addEventListener('click',function (evt) {
     this.parentNode.remove();
    })
   }
  });



  /**
   * 根据id返回标签元素
   * @param {string}id
   * @returns {any}
   */
  function $(id) {
   return typeof id === 'string' ? document.getElementById(id) : null;
  }
 })
</script>
</body>
</html>

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

Javascript 相关文章推荐
JQUERY设置IFRAME的SRC值的代码
Nov 30 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
jQuery控制网页打印指定区域的方法
Apr 07 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
JS使用Chrome浏览器实现调试线上代码
Jul 23 Javascript
JS实现关闭小广告特效
Jan 29 #Javascript
vue element-ui实现动态面包屑导航
Dec 23 #Javascript
vue实现图片上传预览功能
Dec 23 #Javascript
vue项目实现图片上传功能
Dec 23 #Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 #Javascript
vue图片上传组件使用详解
Dec 23 #Javascript
微信小程序实现签字功能
Dec 23 #Javascript
You might like
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
php密码生成类实例
2014/09/24 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP实现长文章分页实例代码(附源码)
2016/02/03 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jQuery中end()方法用法实例
2015/01/08 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析
2019/05/22 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
2019/08/21 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python中把元组转换为namedtuple方法
2020/12/09 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
优秀求职信范文分享
2013/12/19 职场文书
银行竞聘上岗演讲稿
2014/09/12 职场文书
2014五年级班主任工作总结
2014/12/05 职场文书
介绍信怎么写
2015/01/30 职场文书
本科毕业答辩开场白
2015/05/27 职场文书
运动会新闻稿
2015/07/17 职场文书
2016年社区文体活动总结
2016/04/06 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby