当前位置： 首页 > news >正文

day43-Feedback Ui Design（反馈ui设计）

news 2025/12/19 14:58:25

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&#xff08;反馈ui设计&#xff09; 效果 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport&q…...

编程日记 2023/7/28 6:24:14

TypeScript基础篇 - TS日常类型 上篇

目录 TS的常见用法介绍 example01.ts 逃避类型检查&#xff1a;any 思考一下~&#xff1a;不知道类型 类型标注 函数&#xff08;参数和返回值&#xff09; 匿名函数 TS如何知道匿名函数的类型&#xff1f; TS是一种标注式语言&#xff0c;不侵入JS的设计 TS的常见用法…...

编程日记 2023/7/28 6:23:13

量化交易——python数据分析及可视化

该项目分为两个部分&#xff1a;一是数据计算&#xff0c;二是可视化&#xff0c;三是MACD策略 一、计算MACD 1、数据部分 数据来源&#xff1a;tushare 数据字段包含&#xff1a;日期&#xff0c;开盘价&#xff0c;收盘价&#xff0c;最低价&#xff0c;最高价&#xff0c…...

编程日记 2023/7/28 6:22:12

微服务网关

1.网关是如何演化来的&#xff0c;在微服务中有什么作用&#xff1f; 随着单体架构转化为微服务架构的时候&#xff0c;由一个后台服务由一个单一的服务变成了多个微服务&#xff0c;前端应用需要调用多个服务的接口&#xff0c;为了解决这个问题&#xff0c;网关就产生了。网…...

编程日记 2023/7/28 6:21:11

【打卡】Datawhale暑期实训ML赛事

文章目录 赛题描述任务要求数据集介绍评估指标 赛题分析基于LightGBM模型Baseline详解改进baseline早停法添加特征 赛题描述 赛事地址&#xff1a;科大讯飞锂离子电池生产参数调控及生产温度预测挑战赛 任务要求 初赛任务&#xff1a;初赛提供了电炉17个温区的实际生产数据&…...

编程日记 2023/7/28 6:20:09

【python脚本】python实现：目标检测裁剪图片样本，根据类标签文件进行裁剪保存

python实现&#xff1a;目标检测裁剪图片样本&#xff0c;根据类标签文件进行裁剪保存 我在进行目标检测时候&#xff0c;比如红绿灯检测&#xff0c;目标区域很小&#xff0c;样本杂乱。 想要筛选错误样本的话&#xff0c;很困难。可以把目标区域裁剪出来。人大脑处理对于这…...

编程日记 2023/7/28 6:19:08

Mac 终端美化显示

Linux 也可安装 Zsh 后使用此套配置。 1. 安装 Oh My Zsh sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"2. 更换主题&#xff0c;修改文件&#xff1a;~/.zshrc&#xff0c;原内容&#xff1a; ZSH_THEME&quo…...

编程日记 2023/7/28 6:18:07

信息安全：密码学基本理论.

信息安全&#xff1a;密码学基本理论. 密码学是研究编制密码和破译密码的技术科学。研究密码变化的客观规律&#xff0c;应用于编制密码以保守通信秘密的&#xff0c;称为编码学&#xff1b;应用于破译密码以获取通信情报的&#xff0c;称为破译学&#xff0c;总称密码学. 目录…...

编程日记 2023/7/28 6:17:06

【linux升级ssh】 利用rpmbuild工具对ssh打包为rpm包进场安装升级

制作rpm包 rpmbuild命令用于创建软件的二进制包和源代码包。 官方文档&#xff1a;rpm.org - RPM Reference Manual rpmbuild 中文手册&#xff1a;rpmbuild 中文手册 [金步国] 使用rpmbuild将tar包打成rpm包 RPM打包使用的是rpmbuild命令&#xff0c;这个命令来自rpm-buil…...

编程日记 2023/7/28 6:16:04

UCloud上线可商用LLaMA2镜像，助力AGI应用发展

随着人工智能技术的快速发展&#xff0c;大模型应用在自然语言处理、图像识别、智能交互等领域展现出了巨大的潜力&#xff0c;为企业带来了更多创新和商机。众多企业纷纷将大模型应用于产品开发和业务优化中&#xff0c;希望通过提升智能化水平和用户体验来赢得竞争优势。近日…...

编程日记 2023/7/28 6:15:03

Linux推出Debian 12.1，并进行多方面系统修复

据了解&#xff0c;Debian是最古老的 GNU / Linux 发行版之一&#xff0c;也是许多其他基于 Linux 的操作系统的基础&#xff0c;包括 Ubuntu、Kali、MX 和树莓派 OS 等。 此外&#xff0c;该操作系统以稳定性为重&#xff0c;不追求花哨的新功能&#xff0c;因此新版本的发布…...

编程日记 2023/7/28 6:14:01

Spring 事务的使用、隔离级别、@Transactional的使用

Spring事务是Spring框架提供的一种机制&#xff0c;用于管理应用程序中的数据库事务。 事务是一组数据库操作的执行单元&#xff0c;要么全部成功提交&#xff0c;要么全部失败回滚&#xff0c;保证数据的一致性和完整性。 Spring事务提供了声明式事务和编程式事务两种方式&am…...

编程日记 2023/7/28 6:13:00

Top命令

Top top - 12:46:01 up 2 days, 11:10, 3 users, load average: 0.56, 0.59, 0.45系统基本信息&#xff1a;显示了系统运行时间、登录用户数和平均负载&#xff08;load average&#xff09;情况。平均负载是系统在特定时间范围内的平均活跃进程数&#xff0c;可以用来衡量系…...

编程日记 2023/7/28 6:11:59

（三）RabbitMQ七种模式介绍与代码演示

Lison <dreamlison163.com>, v1.0.0, 2023.06.22 七种模式介绍与代码演示 文章目录 七种模式介绍与代码演示四大交换机四种交换机介绍 工作模式简单模式&#xff08;Hello World&#xff09;工作队列模式&#xff08;Work queues&#xff09;订阅模式&#xff08;Publis…...

编程日记 2023/7/28 6:10:58

ElasticSearch Java API 操作

1.idea创建Maven项目 2.添加依赖 修改 pom.xml 文件 <dependency><groupId>org.elasticsearch</groupId><artifactId>elasticsearch</artifactId><version>7.8.0</version></dependency><!-- elasticsearch 的客户端 --…...

编程日记 2023/7/28 6:09:57

【Qt】QML-01：使用QtCreator10创建QML工程，并讲解第一个程序：Hello World

1、创建QML工程 1&#xff09;新建工程 打开QtCreator10,依次点击“Create Project” --> “Application(Qt)” --> “Qt Quick Application(compat)” 注意&#xff1a;本人打算使用Qt5.15.2创建工程&#xff0c;而非Qt6,因此选择兼容低于Qt6版本的“Qt Quick Applicat…...

编程日记 2023/7/28 6:08:56

Docker的安装与部署

Docker 基本概念介绍 通俗理解&#xff1a;镜像是类&#xff0c;容器是对象实例 仓库 应用商店、镜像 下载的应用安装程序、容器 应用程序 镜像(Image) 这里面保存了应用和需要的依赖环境 为什么需要多个镜像&#xff1f;当开发、构建和运行容器化应用程序时&#xff0c;我们…...

编程日记 2023/7/28 6:07:55

【数据结构】实验四：循环链表

实验四 循环链表 一、实验目的与要求 1&#xff09;熟悉循环链表的类型定义和基本操作&#xff1b; 2&#xff09;灵活应用循环链表解决具体应用问题。 二、实验内容 题目一&#xff1a;有n个小孩围成一圈&#xff0c;给他们从1开始依次编号&#xff0c;从编号为1的小孩开…...

编程日记 2023/7/28 6:06:54

【FPGA/D7】

2023年7月26日 串口传图到RAM并TFT显示 视频25note要求&#xff1a;接收两个字节数据合并为一个16位数据并写入ram&#xff1a; FIFO模型与应用场景 视频26 串口传图到RAM并TFT显示 视频25 note 存储器的使用&#xff0c;在开始读写或者结束读写的位置非常容易出现数据错误或…...

编程日记 2023/7/28 6:05:52

Vue的下载以及MVVM分析

&#x1f600;前言本片文章是vue系列第一篇整理了vue的基础和发展史 &#x1f3e0;个人主页&#xff1a;尘觉主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是尘觉&#xff0c;希望我的文章可以帮助到大家&#xff0c;您的满意是我的动力&#x1f609;&#x1f6…...

编程日记 2023/7/28 6:04:51

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/12/9 14:34:25

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/9/23 20:53:38

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

编程新知 2025/12/10 2:57:55

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

编程新知 2025/12/12 21:14:39

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

编程新知 2025/12/17 9:21:57

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

uniapp中使用aixos 报错

问题&#xff1a; 在uniapp中使用aixos&#xff0c;运行后报如下错误&#xff1a; AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...

编程新知 2025/11/29 21:26:48

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

编程新知 2025/12/3 23:08:18

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/12/15 14:13:47

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2025/12/16 18:27:37