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 相关文章推荐
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
js实现浏览器倒计时跳转页面效果
Aug 12 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
Nov 29 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 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
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
解析php下载远程图片函数 可伪造来路
2013/06/25 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
详解php实现页面静态化原理
2017/06/21 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
有道JavaScript监听浏览器的问题
2010/06/23 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
javascript实现画板功能
2020/04/12 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
利用Python获取操作系统信息实例
2016/09/02 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
三好学生自我鉴定
2013/12/17 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
《凡卡》教学反思
2014/04/09 职场文书
论文指导教师评语
2014/04/28 职场文书
语文复习计划
2015/01/19 职场文书
水电工程师岗位职责
2015/02/13 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
SQL Server 数据库实验课第五周——常用查询条件
2021/04/05 SQL Server