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 相关文章推荐
js脚本学习 比较实用的基础
Sep 07 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
js淡入淡出的图片轮播效果代码分享
Aug 24 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
简单的vue-resourse获取json并应用到模板示例
Feb 10 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
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中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP生成指定长度随机数最简洁的方法
2014/07/14 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP封装的PDO数据库操作类实例
2017/06/21 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
javascript appendChild,innerHTML,join性能比较代码
2009/08/29 Javascript
js打开windows上的可执行文件示例
2014/05/27 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
解读ES6中class关键字
2017/11/20 Javascript
浅谈vuex中store的命名空间
2019/11/08 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
Python类的基础入门知识
2008/11/24 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Django ManyToManyField 跨越中间表查询的方法
2018/12/18 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python tkinter之ComboBox(下拉框)的使用简介
2021/02/05 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
爱国主义教育活动总结
2014/05/07 职场文书
小学生五一劳动节演讲稿
2015/03/18 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
7个关于Python的经典基础案例
2021/11/07 Python