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

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

news 2025/11/4 3:51:35

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…...

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

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

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

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

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

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

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

微服务网关

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

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

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

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

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

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

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

编程日记 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. 更换主题，修改文件：~/.zshrc，原内容： ZSH_THEME&quo…...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Spring事务是Spring框架提供的一种机制，用于管理应用程序中的数据库事务。事务是一组数据库操作的执行单元，要么全部成功提交，要么全部失败回滚，保证数据的一致性和完整性。 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系统基本信息：显示了系统运行时间、登录用户数和平均负载（load average）情况。平均负载是系统在特定时间范围内的平均活跃进程数，可以用来衡量系…...

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

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

Lison <dreamlison163.com>, v1.0.0, 2023.06.22 七种模式介绍与代码演示文章目录七种模式介绍与代码演示四大交换机四种交换机介绍工作模式简单模式（Hello World）工作队列模式（Work queues）订阅模式（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）新建工程打开QtCreator10,依次点击“Create Project” --> “Application(Qt)” --> “Qt Quick Application(compat)” 注意：本人打算使用Qt5.15.2创建工程，而非Qt6,因此选择兼容低于Qt6版本的“Qt Quick Applicat…...

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

Docker的安装与部署

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

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

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

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

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

【FPGA/D7】

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

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

Vue的下载以及MVVM分析

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

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

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

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

编程新知 2025/11/1 23:39:16

centos 7 部署awstats 网站访问检测

一、基础环境准备（两种安装方式都要做） bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/11/2 1:18:26

基于Docker Compose部署Java微服务项目

一. 创建根项目根项目（父项目）主要用于依赖管理一些需要注意的点： 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件，否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2025/11/3 0:30:34

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题，前来答题。每个人对刷题理解是不同，有的人是看了writeup就等于刷了，有的人是收藏了writeup就等于刷了，有的人是跟着writeup做了一遍就等于刷了，还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/11/1 3:10:07

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式一、引入在开发中，我们经常会遇到这样的场景：一个对象的状态变化需要自动通知其他对象，比如： 电商平台中，商品库存变化时需要通知所有订阅该商品的用户；新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

NXP S32K146 T-Box 携手 SD NAND（贴片式TF卡）：驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中，车辆不再仅仅是传统的交通工具，而是逐步演变为高度智能的移动终端。这一转变的核心支撑，来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒（T-Box）方案：NXP S32K146 与…...

编程新知 2025/10/25 13:34:22

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时，Again增益0db变化为6DB，画面的变化只有2倍DN的增益，比如10变为20。这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析： 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/9/30 16:23:57

Android写一个捕获全局异常的工具类

项目开发和实际运行过程中难免会遇到异常发生，系统提供了一个可以捕获全局异常的工具Uncaughtexceptionhandler，它是Thread的子类（就是package java.lang;里线程的Thread）。本文将利用它将设备信息、报错信息以及错误的发生时间都…...

编程新知 2025/10/28 9:15:22

sshd代码修改banner

sshd服务连接之后会收到字符串： SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。是否可以通过修改此banner达到让人无法识别此服务的目的呢？ 不能。因为这是写的SSH的协议中的。也就是协议规定了banner必须这么写。 SSH- 开头&#xff0c…...

编程新知 2025/10/27 11:18:20

在Spring Boot中集成RabbitMQ的完整指南

前言在现代微服务架构中，消息队列（Message Queue）是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件，支持多种消息协议，具有高可靠性和可扩展性。本博客将详细介绍如何在 Spring Boot 项目…...

编程新知 2025/7/27 20:49:33

50 天学习 50 个项目 - HTMLCSS and JavaScript

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

效果

index.html

style.css

script.js

相关文章：