纯前端实现—留言板

纯前端实现—留言板实现效果 留言板源码 DOCTYPE tml htmllang en head metacharset UTF 8 title 留言板 title style box width style metacharset UTF 8 head htmllang en

实现效果:

留言板

源码:

 
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板 
      title> <style> #box{ 
        width: 800px; margin: 50px auto; /*border: 1px solid red;*/ } #box textarea{ 
        width: 100%; height: 300px; font-size: 30px; } li{ 
        list-style: none; height: 40px; line-height: 40px; /*加个下划线*/ border-bottom: 1px solid grey; }  
       style>  
        head> <body> <div id="box"> <textarea class="text" name="" id="" cols="30" rows="10"> 
         textarea> <button class="but">发布 
          button> <ul class="list"> 
           ul>  
            div> <script> var oText = document.getElementsByClassName("text")[0]; oBut = document.getElementsByClassName("but")[0]; oList = document.getElementsByClassName("list")[0]; oBut.onclick = function () { 
              val = oText.value; oText.value = ""; oList.innerHTML += "
  • "
  • + val + "" }
    script> body> html>


    ??可通过点击下面——>关注本人运营
    公众号??


    【可以公众号里私聊并标明来自CSDN,会拉你进入技术交流群(群内涉及各个领域大佬级人物,任何问题都可讨论~)—>互相学习&&共同进步(非诚勿扰)】

    版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

    发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/178242.html原文链接:https://javaforall.net

    (0)
    上一篇 2026年3月26日 下午5:43
    下一篇 2026年3月26日 下午5:43


    相关推荐

    • PyCharm与Python的安装教程2021.11

      PyCharm与Python的安装教程2021.11文章预览:一、进入官网下载PyCharm安装包二、等待下载完成后点击进行安装三、Python安装(只介绍最新版本)四、第一个PyCharm程序五、PyCharm安装第三方库方法一、进入官网下载PyCharm安装包自行进入PyCharm官网或点击https://www.jetbrains.com/pycharm/download/#section=windows下载的是社区版,免费并且足够使用。二、等待下载完成后点击进行安装1.点击next2.选择自己要安装的目录3.勾选一些设定(1

      2022年8月28日
      7
    • webide配置_web vscode

      webide配置_web vscode背景为了解决函数计算本地环境差异和配置繁琐的问题,在此背景下,就有了我们的WebIDE产品,WebIDE能让函数的开发、测试和部署更加流畅,降低了函数计算的学习成本和缩短了函数的开发周期。WebIDE入口地址:https://ide.fc.aliyun.com介绍WebIDE是一个基于H5支持多语言的集成开发环境。相当于VSCo…

      2022年10月18日
      5
    • potplayer 64位 官网下载地址

      potplayer 64位 官网下载地址potplayer64位最新官网下载地址链接:https://gsf-fl.softonic.com/f94/2ec/be06ec8a283bee92cda70eb3ede9c661d0/PotPlayerSetup64.exe?Expires=1585679112&Signature=cff21a190f0fcb9c61356f8eca9b8155ed6afc48&ur…

      2022年7月12日
      54
    • BoundsChecker 使用方法[通俗易懂]

      1前言我在本文中详细介绍了测试工具NuMegaDevpartner(以下简称NuMega)的使用方法。NuMega是一个动态测试工具,主要应用于白盒测试。该工具的特点是学习简单、使用方便、功能有效。NuMega共有三个独立的子功能——BoundsChecker、TrueCoverage、TrueTime。BoundsChecker为代码检错工具,TrueCoverage为测试覆盖率统计…

      2022年4月8日
      64
    • Linux 配置nginx转发路由

      Linux 配置nginx转发路由配置 nginx 转发路由 Linux 上首先安装好 nginxLinux 上首先安装好 nginx 进入到 nginx 安装目录 配置文件 cd usr local nginx conf 创建 conf d 文件夹 mkdirconf d 首先更改 nginx conf 文件内容 yamlxml usernobody worker processes1 error loglogs error log error loglogs error logn

      2026年1月15日
      3
    • 数据库的左右连接和内连接_数据库各种连接的区别

      数据库的左右连接和内连接_数据库各种连接的区别原英文文章链接:https://www.codeproject.com/Articles/33052/Visual-Representation-of-SQL-Joins准备表A:–auto-generateddefinitionCREATETABLEtable_a(PKINT(10)NOTNULLPRIMARYKEY,Va…

      2026年1月27日
      5

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注

    关注全栈程序员社区公众号