首页 > 其他分享 >实战迷你留言板学习

实战迷你留言板学习

时间:2024-06-15 18:32:24浏览次数:10  
标签:实战 comment const 迷你 list value content 文本 留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style2.css">
</head>
<body>
    <form class="comment" id="comment">
        <label for="content">请留言:</label>
        <textarea name="content" id="content" cols="30" rows="5" placeholder="不要超过100个字符"></textarea>
        <button class="submit" type="button" name="submit">提交</button>
      </form>
        <ul class="list">
            <!-- 当点击按钮时其实是删除“删除按钮的父节点” -->
       <!-- <li>hhhhh <button>删除</button></li> -->
        </ul>  
        <script>
     // 1.拿到表单,comment代表当前留言的意思,拿到id属性
     const comment = document.forms.comment;
     // 2.拿到文本域
     const content = comment.content;
     // 3.能拿到提交按钮
     const bth = comment.submit;
     // 4.拿到列表
     const list = document.querySelector('.list');
     // 5.查看
     //  console.log(comment,content,bth,list)

     //  给提交按钮添加一个点击事件
     bth.onclick = ev =>{
        // 用户提交的内容用value来表示,content文本域对象,用trim来过滤掉空格
        let value = content.value.trim();
        // 进行判断
        if (value.length > 0 && value.length <= 100) {
            // 表示有内容了,将用户内容插入到列表中,最新的留言在最上面
            // 创建一个li标签
            const li = document.createElement('li');
            // 往里赛内容
            li.textContent=value;
            // 添加下边白色框高度为2
            li.style.borderBottom='1px solid white';
            li.style.minHeight='2em'
            li.style.display = 'flex'; // 使用 Flexbox 布局  
            li.style.alignItems = 'center'; // 垂直居中  
            li.style.justifyContent = 'space-between'; // 水平两端对齐

            // 创建一个删除按钮
            const delBth=document.createElement('button')
            // 创建名字
            delBth.textContent = '删除留言';
            delBth.style.float='right'
            delBth.classList.add('del-btn');
            // 创建删除按钮的点击事件
            delBth.onclick = function(){
                // confir对话框,显示两个内容1.确定2.取消
                if (confirm('是否删除?')){
                    // true:删除
                    // 如何获取父元素
                    // ths表示删除按钮,parentNode代表父元素
                    this.parentNode.remove();
                    // 用户反馈
                    alert('删除成功');
                    // 获取焦点
                    content.focus();
                    // 结束
                return false;
                }
            }


            //  将删除按钮添加到<li>元素中
            li.append(delBth);

            // 将新的留言项目放在列表顶部
            list.prepend(li)
            alert('留言成功');
            // 清空文本域
            content.value=null;
            // content.value='';
            // 将焦点放回到文本域
            content.focus();
            
        }else{
            alert('没有输入或超出长度');
            // 将焦点放回到文本域
            content.focus();
            // 结束
            return false;
        }
    }
    </script>
</body>
</html>

  

标签:实战,comment,const,迷你,list,value,content,文本,留言板
From: https://www.cnblogs.com/QWD7986/p/18249603

相关文章

  • 读取超7100MB/s最高仅51度的长江存储PC411 SSD!雷神MIX PRO迷你机评测
    一、前言:搭载长江存储SSD和酷睿Ultra5125H处理器的雷神迷你机英特尔酷睿Ultra系列移动处理器发布半年之后,搭载它的各路迷你主机陆续出现在消费者面前。最近,雷神带来了全新的MIXPro迷你机,它就搭载了酷睿Ultra5125H处理器,还有广受好评的长江存储PC411SSD。先说SSD!现在我......
  • Redis实战指南:基础知识、实战技巧、应用场景及最佳实践全攻略
    背景在Java系统实现过程中,我们不可避免地会借助大量开源功能组件。然而,这些组件往往功能丰富且体系庞大,官方文档常常详尽至数百页。而在实际项目中,我们可能仅需使用其中的一小部分功能,这就造成了一个挑战:如何在有限的时间和精力下,高效地掌握并使用这些组件的核心功能,以实现......
  • ReentrantLock的非公平锁(NonfairSync)深度解析:源码之旅与实战策略
    1.引言在Java并发编程中,ReentrantLock作为一种可重入的互斥锁,提供了比synchronized更强大和灵活的功能。其中,NonfairSync作为ReentrantLock内部非公平锁的实现,其设计理念和源码实现都体现了对性能和公平性的权衡。2.NonfairSync概述非公平锁特性:新到达的线程在......
  • 计算机毕业设计项目推荐,32762 外卖app系统设计与实现(开题答辩+程序定制+全套文案 )上万
    摘 要随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,餐饮外卖当然也不例外。外卖app系统主要功能模块包括后台首页,轮播图,资源管理(餐饮新闻,新闻分类),系统用户(注册用户,配送员,注册商家)模块管理(美食信息,外卖点餐,配......
  • 计算机毕业设计项目推荐,32650在线教培管理系统的设计与实现(开题答辩+程序定制+全套文
    目 录摘要Abstract1绪论1.1研究意义1.2开发现状1.3论文结构与章节安排2 在线教培管理系统 系统分析2.1可行性分析2.2系统流程分析2.2.1数据增加流程2.2.2数据修改流程2.2.3数据删除流程2.3 系统功能分析2.3.1功能性分析2.3.2非功......
  • 实战表单验证学习
    <!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"/><metaname="viewport"content=&quo......
  • LVS负载均衡集群企业级应用实战-LVS-DR(四)
    目录LVS-DR 一.环境准备二.对虚拟主机操作三.对真实服务器操作 四.打开网页测试LVS-DR 一.环境准备三台虚拟机,都要在同一网段内,统一关闭防火墙和selinux,时间同步,配置好YUM源。系统用centos和roucky都行。主机名主机IP模拟服务器系统用途localhostVIP:1......
  • 04《android studio开发实战(第三版)》第七到十章阅读笔记
    第七章:持久化存储本章介绍了SharedPreferences的使用方法,它是一种轻量级的存储方案,用于保存简单的键值对数据,如用户设置和配置。 学习了如何创建SharedPreferences对象,使用getSharedPreferences()方法读取和写入数据,以及如何使用apply()和commit()提交修改。了解了如何在Andro......
  • 实战分析Java的异步编程,并通过CompletableFuture进行高效调优
    一、写在开头在我们一开始讲多线程的时候,提到过异步与同步的概念,这里面我们再回顾一下:同步:调用方在调用某个方法后,等待被调用方返回结果;调用方在取得被调用方的返回值后,再继续运行。调用方顺序执行,同步等待被调用方的返回值,这就是阻塞式调用;异步:调用方在调用某个方法后,直接返......
  • 【云岚到家】-day03-2-门户缓存实现实战
    【云岚到家】-day03-2-门户缓存实现实战5缓存实现5.2定时任务更新缓存5.2.1分布式调度平台5.2.1.1jdk提供的Timer定时器5.2.1.2使用第三方Quartz方式5.2.1.3使用分布式调度平台XXL-JOB5.2.2XXL-JOB5.2.2.1介绍5.2.2.2部署调度中心5.2.2.3执行器5.2.2定义缓......