JavaScript实现动态留言板


Posted in Javascript onMarch 16, 2020

本文实例为大家分享了简单动态留言板的创建,供大家参考,具体内容如下

效果图展示:

JavaScript实现动态留言板

思路

JavaScript实现动态留言板

html代码

<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发表留言</button>
<ul></ul>

css代码

<style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      padding: 100px;
    }
    textarea {
      width: 200px;
      height: 100px;
      border: 1px solid #000;
      outline: none;
      resize: none;
    }
    ul {
      margin-top: 50px;
    }
    li {
      width: 300px;
      padding: 5px;
      background-color: rgb(245, 209, 243);
      color: red;
      font-size: 14px;
      margin: 15px 0;
    }
    li a {
      float: right;
      width: 40px;
      height: 20px;
      text-align: center;
      text-decoration: none;
      background-color: #fff;
      border: 1px solid #ccc;
      color: #000;
    }
</style>

js代码

<script>
  //点击按钮之后 就动态创建一个li 添加到ul里面
  //创建li的同时 把文本域里面的值通过li.innerHTML赋值给li

  //获取元素
  var text = document.querySelector('textarea');
  var btn = document.querySelector('button');
  var ul = document.querySelector('ul');
  //创建事件
  btn.onclick = function () {
    if (text.value == '') {
      return false;
    } else {
      //1.创建li
      var li = document.createElement('li');
      //先有li 再赋值  
      li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" >删除</a>';

      //2.添加li
      ul.appendChild(li); //在后面追加
      // ul.insertBefore(li,ul.children[0]); 动态在前面追加

      //3.删除元素 删除当前链接的li 他的父亲
      var as = document.querySelectorAll('a');
      for(var i = 0;i<as.length;i++){
        as[i].onclick = function(){
          // 删除当前a的父亲li  li的父亲是ul  
          //删除节点语法 父节点.removeChild(子节点)
          ul.removeChild(this.parentNode);
        }
      }
    }
  }
</script>

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

Javascript 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
jQuery实现当前页面标签高亮显示的方法
Mar 10 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
Sep 03 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
js实现简单的倒计时
Jan 28 Javascript
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 #Javascript
js+canvas实现纸牌游戏
Mar 16 #Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 #Javascript
JS apply用法总结和使用场景实例分析
Mar 14 #Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 #Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 #Javascript
js实现的订阅发布者模式简单示例
Mar 14 #Javascript
You might like
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
PHP5.2中PDO的简单使用方法
2016/03/25 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
Vue实现购物车功能
2017/04/27 Javascript
Angular2安装angular-cli
2017/05/21 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
Python3实现从指定路径查找文件的方法
2015/05/22 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
大四自我鉴定范文
2013/10/06 职场文书
运动会稿件200字
2014/02/07 职场文书
求职面试个人自我评价
2014/02/28 职场文书
爱情保证书大全
2014/04/29 职场文书
放牛班的春天观后感
2015/06/01 职场文书
《刷子李》教学反思
2016/02/20 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers