广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScriptDOM实现简单留言板
  • 442
分享到

JavaScriptDOM实现简单留言板

jsDOM留言板 2022-11-12 23:11:36 442人浏览 八月长安
摘要

本文实例为大家分享了javascript DOM实现简单留言板的具体代码,供大家参考,具体内容如下 效果图: 先准备html代码: <body>     <tex

本文实例为大家分享了javascript DOM实现简单留言板的具体代码,供大家参考,具体内容如下

效果图:

先准备html代码:

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
 
    </ul>
</body>

CSS代码如下:

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 100px;
        }
        
        textarea {
            width: 200px;
            height: 100px;
            border: 1px solid pink;
            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;
        }
</style>

接下来是最重要的部分,我们先使用document.querySelector()获取我们要操作的对象:button,textarea和ul;

再给button注册点击事件,中间加入判断是否有输入内容,如有输入内容,则继续操作,使用document.createElement(‘li’)创建li标签,再使用li.innerHTML获取textarea控件用户输入的值,最后使用ul.insertBefore(li,ul.children[0])插入创建好的li标签。

注意:因为留言板显示最新的留言,所以插入在li的最前面。

完整代码如下:

<body>
    <textarea name="" id=""></textarea>
    <button>发布</button>
    <ul>
 
    </ul>
    <script>
        //获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        //注册事件
        btn.onclick = function() {
            if (text.value == '') {
                alert('你没输内容');
                return false;
            } else {
                var li = document.createElement('li');
                li.innerHTML = text.value;
                ul.insertBefore(li, ul.children[0]);
            }
            text.value = '';
        }
    </script>
 
</body>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: JavaScriptDOM实现简单留言板

本文链接: https://www.lsjlt.com/news/161803.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScriptDOM实现简单留言板
    本文实例为大家分享了JavaScript DOM实现简单留言板的具体代码,供大家参考,具体内容如下 效果图: 先准备html代码: <body>     <tex...
    99+
    2022-11-12
    js DOM 留言板
  • JS实现简单留言板功能
    本文实例为大家分享了JS实现简单留言板的具体代码,供大家参考,具体内容如下 言归正传,之前的案例相信大家都已经完全弄清楚了,还记得我们之前统计字数的那个案例吗?忘记的可以再去翻阅一下...
    99+
    2022-11-13
    JS 留言板
  • asp怎么实现简单的ajax留言板
    这篇文章主要介绍“asp怎么实现简单的ajax留言板”,在日常操作中,相信很多人在asp怎么实现简单的ajax留言板问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”asp怎么实...
    99+
    2022-10-19
    asp ajax
  • HTML+PHP+MYSQL实现一个简单的留言板
    提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加 大家好,下面将为大家展示 基于HTML PHP MYSQL的留言板的设计与实现过程,适合初学者点击观看,以下我将会以笔者自称! 废...
    99+
    2023-09-05
    mysql php html javascript css
  • asp实现简单的ajax留言板实例代码
    index.asp<%@ codepage=65001%><%option explicit%><% Response.Charset="...
    99+
    2022-10-19
    asp ajax
  • php怎么实现简易留言板
    本文操作环境:Windows7系统,PHP7.4版,Dell G3电脑。php怎么实现简易留言板?PHP+MySql实现一个简单的留言板://嗯,跟着书学的,代码不是自己写的,但是都能理解,有时间自己去写个好看一点的吼吼吼~(不熟练花了一天...
    99+
    2014-08-31
    php 留言板
  • php如何实现简易留言板
    小编给大家分享一下php如何实现简易留言板,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!php实现简易留言板的方法:1、在数据库中创建两张表;2、编写send页面...
    99+
    2023-06-22
  • 如何使用JavaScript DOM制作简单留言板
    这篇文章主要介绍“如何使用JavaScript DOM制作简单留言板”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“如何使用JavaScript DOM制作简单留言板...
    99+
    2022-10-19
    javascript dom
  • JavaScript实现留言板添加删除留言
    本文分享一个JavaScript的留言板添加留言、删除留言的小案例,内附详细代码分析、但不涉及数据库操作,只解析底层代码实现思路: 实现效果 运行代码界面: 输入留言进行添加:(最...
    99+
    2022-11-12
    js留言板添加删除留言 js留言板添加留言 js留言板删除留言
  • 如何实现ajax留言板
    小编给大家分享一下如何实现ajax留言板,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码如下:// JavaScri...
    99+
    2022-10-19
    ajax
  • js实现web留言板功能
    本文实例为大家分享了js实现web留言板的具体代码,供大家参考,具体内容如下 1.画一个标题栏和一个内容栏,提交按钮,留言板 心情:<br/> <input t...
    99+
    2022-11-12
    js 留言板
  • JavaScript实现简单版的留言发布与删除
    首先用户在输入框中输入内容,按下发布按钮,内容到下面的li中,并且清空输入框中的内容 下面这个li元素就是后面创建的 <!DOCTYPE html> <html...
    99+
    2022-11-13
    JavaScript 留言发布 JavaScript 留言删除 JavaScript 留言
  • asp留言板功能怎么实现
    ASP留言板功能可以通过以下步骤实现:1. 创建数据库:使用SQL Server或MySQL等数据库软件创建一个数据库,用于存储留言...
    99+
    2023-06-14
    asp留言板
  • Flutter开发实现底部留言板
    本文实例为大家分享了Flutter实现底部留言板的具体代码,供大家参考,具体内容如下 前言 现在大家基本上都会去接触抖音那款app,其中抖音中的留言区域的效果也是要前几天工作的需求,...
    99+
    2022-11-13
    Flutter 留言板
  • php如何实现用户留言板
    这篇文章主要介绍“php如何实现用户留言板”,在日常操作中,相信很多人在php如何实现用户留言板问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php如何实现用户留言板”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-06-22
  • php怎么实现用户留言板
    本文操作环境:Windows7系统,PHP7.4版,Dell G3电脑。php怎么实现用户留言板?php实现留言板功能(代码详解)简单的PHP留言板制作做基础的留言板功能 需要三张表:员工表,留言表,好友表首先造一个登入页面:<fo...
    99+
    2018-03-14
    php 留言板
  • php怎么实现留言板功能
    要实现留言板功能,可以使用PHP语言结合数据库操作来实现。以下是一个简单的实现留言板功能的示例:1. 创建数据库表格:创建一个名为&...
    99+
    2023-09-07
    php
  • php+mysql的留言板(仅实现功能)
    php+mysql的留言板(仅实现功能) 基于上次做好的登录注册界面和sql表,进一步实现用户留言功能。 我的思路: 1.以上次的loginaf.php为基础,添加html代码,再做一个form表单用来传输用户的留言。 ...
    99+
    2017-02-02
    php+mysql的留言板(仅实现功能)
  • node.js+express留言板功能实现示例
    目录留言板所需类库开源项目项目结构留言板 基于nodejs+express+art-template的留言板功能。包含列表界面、添加界面和发送留言功能。 所需类库 直接copy以下p...
    99+
    2022-11-12
    node.js express留言板 node.js 留言板
  • JavaScript怎么实现简单版的留言发布与删除
    本篇内容介绍了“JavaScript怎么实现简单版的留言发布与删除”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!首先用户在输入框中输入内容,...
    99+
    2023-06-29
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作