day43-Feedback Ui Design（反馈ui设计）
50 天学习 50 个项目 - HTMLCSS and JavaScript
day43-Feedback Ui Design（反馈ui设计）
效果
index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Let Us Know Your Feedback</title><!-- 图标库 --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="crossorigin="anonymous" /><link rel="stylesheet" href="style.css" />
</head><body><!-- 面板容器 --><div id="panel" class="panel-container"><strong>你对我们的服务表现满意吗?</strong><!-- 评级容器 --><div class="ratings-container"><!-- 评级 --><div class="rating">不好</div><div class="rating">一般</div><div class="rating active">满意</div></div><button class="button" id="send">发送</button></div><script src="script.js"></script>
</body></html>
style.css
/* 引入字体 */
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');* {box-sizing: border-box;
}body {background: url('https://source.unsplash.com/random') no-repeat center/cover;font-family: 'Montserrat', sans-serif;/* 子元素面板居中 */display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;
}/* 面板容器 */
.panel-container {background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);border-radius: 4px;/* 字体大小设置为父元素字体大小的百分比。 */font-size: 90%;/* 竖直居中 */display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;padding: 30px;max-width: 400px;transition: transform 0.5s linear;
}/* 类似翻卡片的效果 */
.changeCard{transform: rotateY(360deg);
}
/* 标题 */
.panel-container strong {line-height: 20px;
}/* 评级容器 */
.ratings-container {display: flex;margin: 20px 0;
}/* 评级 */
.rating {flex: 1;cursor: pointer;padding: 20px;margin: 10px 5px;background: linear-gradient(145deg, #cacaca, #f0f0f0);
}/* 选中该项时 */
.rating:hover,
.rating.active {border-radius: 4px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.98);
}/* 发送按钮 */
.button {cursor: pointer;position: relative;padding: 10px 24px;font-size: 18px;color: rgb(98, 177, 193);border: 2px solid rgb(98, 136, 193);border-radius: 34px;background-color: transparent;font-weight: 600;/* 定义了一个自定义的贝塞尔曲线，使得动画起初缓慢，然后加速，在接近结束时再次缓慢，从而创建一个平滑的过渡效果。 */transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);overflow: hidden;
}/* 按钮悬浮时，背景的变化 */
.button::before {content: '';position: absolute;/* inset 属性是一个简写属性，设置了伪元素的 top、right、bottom 和 left 的值都为 0，即将伪元素放置在其容器元素的四个边界上。 */inset: 0;/* 居中 */margin: auto;/* 以上两个css属性使其从按钮中心放大 */width: 50px;height: 50px;/* 继承了按钮元素的 border-radius 属性 */border-radius: inherit;scale: 0;z-index: -1;background-color: rgb(114, 135, 238);transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
}.button:hover::before {scale: 3;
}.button:hover {color: #212121;scale: 1.1;box-shadow: 0 0px 20px rgba(193, 163, 98, 0.4);
}.button:active {scale: 1;
}/* 用于js中反馈后的显示文本的小红心 */
.fa-heart {color: red;font-size: 30px;margin-bottom: 10px;
}
script.js
// 重点 flex 事件委派 注意：html中必须有一个.rating添加active类，否则报错
// 1.获取元素节点
const ratings = document.querySelectorAll('.rating')//所有的评级选项
const ratingsContainer = document.querySelector('.ratings-container')//评级容器
const sendBtn = document.querySelector('#send')//发送按钮
const panel = document.querySelector('#panel')//展示面板
let selectedRating = '满意'
// 此处使用事件委派
ratingsContainer.addEventListener('click', (e) => {// console.log(e.target);//<div class="rating"> 一般 </div >// 移除原有的activedocument.querySelector('.rating.active').classList.remove('active')// 对当前点击的选项加activee.target.classList.add('active')selectedRating = e.target.innerText// console.log(selectedRating);
})
// 点击，发送显示结果
sendBtn.addEventListener('click', () => {panel.innerHTML = `<i class="fas fa-heart"></i><strong>感谢!</strong><br><strong>您的反馈为: ${selectedRating}</strong><p>我们将利用您的反馈来改进我们的服务</p>`panel.classList.add('changeCard')
})相关文章：
day43-Feedback Ui Design（反馈ui设计）
50 天学习 50 个项目 - HTMLCSS and JavaScript day43-Feedback Ui Design（反馈ui设计） 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport&q…...
TypeScript基础篇 - TS日常类型 上篇
目录 TS的常见用法介绍 example01.ts 逃避类型检查：any 思考一下~：不知道类型 类型标注 函数（参数和返回值） 匿名函数 TS如何知道匿名函数的类型？ TS是一种标注式语言，不侵入JS的设计 TS的常见用法…...
量化交易——python数据分析及可视化
该项目分为两个部分：一是数据计算，二是可视化，三是MACD策略 一、计算MACD 1、数据部分 数据来源：tushare 数据字段包含：日期，开盘价，收盘价，最低价，最高价，…...
微服务网关
1.网关是如何演化来的，在微服务中有什么作用？ 随着单体架构转化为微服务架构的时候，由一个后台服务由一个单一的服务变成了多个微服务，前端应用需要调用多个服务的接口，为了解决这个问题，网关就产生了。网…...
【打卡】Datawhale暑期实训ML赛事
文章目录 赛题描述任务要求数据集介绍评估指标 赛题分析基于LightGBM模型Baseline详解改进baseline早停法添加特征 赛题描述 赛事地址：科大讯飞锂离子电池生产参数调控及生产温度预测挑战赛 任务要求 初赛任务：初赛提供了电炉17个温区的实际生产数据&…...
【python脚本】python实现：目标检测裁剪图片样本，根据类标签文件进行裁剪保存
python实现：目标检测裁剪图片样本，根据类标签文件进行裁剪保存 我在进行目标检测时候，比如红绿灯检测，目标区域很小，样本杂乱。 想要筛选错误样本的话，很困难。可以把目标区域裁剪出来。人大脑处理对于这…...
Mac 终端美化显示
Linux 也可安装 Zsh 后使用此套配置。 1. 安装 Oh My Zsh sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"2. 更换主题，修改文件：~/.zshrc，原内容： ZSH_THEME&quo…...
信息安全：密码学基本理论.
信息安全：密码学基本理论. 密码学是研究编制密码和破译密码的技术科学。研究密码变化的客观规律，应用于编制密码以保守通信秘密的，称为编码学；应用于破译密码以获取通信情报的，称为破译学，总称密码学. 目录…...
【linux升级ssh】 利用rpmbuild工具对ssh打包为rpm包进场安装升级
制作rpm包 rpmbuild命令用于创建软件的二进制包和源代码包。 官方文档：rpm.org - RPM Reference Manual rpmbuild 中文手册：rpmbuild 中文手册 [金步国] 使用rpmbuild将tar包打成rpm包 RPM打包使用的是rpmbuild命令，这个命令来自rpm-buil…...
UCloud上线可商用LLaMA2镜像，助力AGI应用发展
随着人工智能技术的快速发展，大模型应用在自然语言处理、图像识别、智能交互等领域展现出了巨大的潜力，为企业带来了更多创新和商机。众多企业纷纷将大模型应用于产品开发和业务优化中，希望通过提升智能化水平和用户体验来赢得竞争优势。近日…...
Linux推出Debian 12.1，并进行多方面系统修复
据了解，Debian是最古老的 GNU / Linux 发行版之一，也是许多其他基于 Linux 的操作系统的基础，包括 Ubuntu、Kali、MX 和树莓派 OS 等。 此外，该操作系统以稳定性为重，不追求花哨的新功能，因此新版本的发布…...
Spring 事务的使用、隔离级别、@Transactional的使用
Spring事务是Spring框架提供的一种机制，用于管理应用程序中的数据库事务。 事务是一组数据库操作的执行单元，要么全部成功提交，要么全部失败回滚，保证数据的一致性和完整性。 Spring事务提供了声明式事务和编程式事务两种方式&am…...
Top命令
Top top - 12:46:01 up 2 days, 11:10, 3 users, load average: 0.56, 0.59, 0.45系统基本信息：显示了系统运行时间、登录用户数和平均负载（load average）情况。平均负载是系统在特定时间范围内的平均活跃进程数，可以用来衡量系…...
（三）RabbitMQ七种模式介绍与代码演示
Lison <dreamlison163.com>, v1.0.0, 2023.06.22 七种模式介绍与代码演示 文章目录 七种模式介绍与代码演示四大交换机四种交换机介绍 工作模式简单模式（Hello World）工作队列模式（Work queues）订阅模式（Publis…...
ElasticSearch Java API 操作
1.idea创建Maven项目 2.添加依赖 修改 pom.xml 文件 <dependency><groupId>org.elasticsearch</groupId><artifactId>elasticsearch</artifactId><version>7.8.0</version></dependency><!-- elasticsearch 的客户端 --…...
【Qt】QML-01：使用QtCreator10创建QML工程，并讲解第一个程序：Hello World
1、创建QML工程 1）新建工程 打开QtCreator10,依次点击“Create Project” --> “Application(Qt)” --> “Qt Quick Application(compat)” 注意：本人打算使用Qt5.15.2创建工程，而非Qt6,因此选择兼容低于Qt6版本的“Qt Quick Applicat…...
Docker的安装与部署
Docker 基本概念介绍 通俗理解：镜像是类，容器是对象实例 仓库 应用商店、镜像 下载的应用安装程序、容器 应用程序 镜像(Image) 这里面保存了应用和需要的依赖环境 为什么需要多个镜像？当开发、构建和运行容器化应用程序时，我们…...
【数据结构】实验四：循环链表
实验四 循环链表 一、实验目的与要求 1）熟悉循环链表的类型定义和基本操作； 2）灵活应用循环链表解决具体应用问题。 二、实验内容 题目一：有n个小孩围成一圈，给他们从1开始依次编号，从编号为1的小孩开…...
【FPGA/D7】
2023年7月26日 串口传图到RAM并TFT显示 视频25note要求：接收两个字节数据合并为一个16位数据并写入ram： FIFO模型与应用场景 视频26 串口传图到RAM并TFT显示 视频25 note 存储器的使用，在开始读写或者结束读写的位置非常容易出现数据错误或…...
Vue的下载以及MVVM分析
😀前言本片文章是vue系列第一篇整理了vue的基础和发展史 🏠个人主页：尘觉主页 🧑个人简介：大家好，我是尘觉，希望我的文章可以帮助到大家，您的满意是我的动力😉Ƕ…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
MySQL 8.0 OCP 英文题库解析（十三）
Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程：首先由HR先筛选一部分简历后，在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如：Boss直聘（招聘方平台） 直接按照条件进行筛选 例如：…...
学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2
每日一言 今天的每一份坚持，都是在为未来积攒底气。 案例：OLED显示一个A 这边观察到一个点，怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 ： 如果代码里信号切换太快（比如 SDA 刚变，SCL 立刻变&#…...
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...