【webApp之h5端实战】首页评分组件的原生实现

关于评分组件，我们经常在现代前端框架中用到，UI美观效果丰富，使用体验是非常不错的。现在自己动手使用原生js封装下评分组件，可以用在自己的项目中。

组件实现原理

点击的❤左侧包括自己都是高亮的样式，右侧都是灰色的样式，这样就能把组件的状态区分开了。右边再加上辅助描述的文字，也可以是分数数字，根据项目业务的需要可以自行选择，非常简单。我这里就处理成描述文字了。

实现效果演示

代码实现

  • html页面结构
 <section id=

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/928556.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于Java Springboot旅游攻略APP且微信小程序

基于Java Springboot旅游攻略APP且微信小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 微信…
阅读更多...
ScratchLLMStepByStep：一步一步构建大语言模型教程

ScratchLLMStepByStep：一步一步构建大语言模型教程

前言 在学习大语言模型的时候&#xff0c;总会遇到各种各样的名词&#xff0c;像自注意力、多头、因果、自回归、掩码、残差连接、归一化等等。这些名词会让学习者听的云里雾里&#xff0c;觉得门槛太高而放弃。 本教程将会带你从零开始&#xff0c;一步一步的去构建每一个组…
阅读更多...
[MacOS] [kubernetes] MacOS玩转虚拟化最佳实践

[MacOS] [kubernetes] MacOS玩转虚拟化最佳实践

❓ 为什么不在MacOS本机安装呢&#xff1f;因为M系列芯片是Arm架构&#xff0c;与生产环境或者在本地调试时候&#xff0c;安装虚拟镜像和X86不同&#xff0c;造成不必要的切换环境的额外成本&#xff0c;所以在虚拟化的x86调试 步骤 & 详情 一: 安装OrbStack & 并配置…
阅读更多...
MySQL的用户管理和密码管理

MySQL的用户管理和密码管理

用户的密码管理 给用户改密码 初始化mysql后设置初始密码 mysqladmin -uroot password wzy666 改变已有密码 mysqladmin -uroot -pwzy666 password wzy999 SQL语句改&#xff0c;前提是已经进入数据库 alter user rootlocalhost identified by 123456; # 利用数据库服务…
阅读更多...
SQLite：DDL（数据定义语言）的基本用法

SQLite：DDL（数据定义语言）的基本用法

SQLite&#xff1a;DDL&#xff08;数据定义语言&#xff09;的基本用法 1 主要内容说明2 相关内容说明2.1 创建表格&#xff08;create table&#xff09;2.1.1 SQLite常见的数据类型2.1.1.1 integer&#xff08;整型&#xff09;2.1.1.2 text&#xff08;文本型&#xff09;2…
阅读更多...
STM32--基于STM32的智能家居设计与实现

STM32--基于STM32的智能家居设计与实现

本文详细介绍基于STM32F103C8T6的智能家居设计与实现&#xff0c;详细设计资料见文末链接 一、功能模块介绍 智能家居系统系统图如下所示&#xff0c;主要包括温湿度传感器、OLED液晶显示&#xff0c;WIFI物联网模块、人体红外预警模块、烟雾传感器模块、蜂鸣器模块 &#…
阅读更多...
基于Java Springboot校园导航微信小程序

基于Java Springboot校园导航微信小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse微信开发…
阅读更多...
在 uniapp 项目中使用 Iconify 字体图标库

在 uniapp 项目中使用 Iconify 字体图标库

本文示例在 uniapp 项目中对 Iconify 字体图标库的安装和使用&#xff08;Iconify 字体图标库是一个免费开源的图标库&#xff0c;它拥有超过20万个开源矢量图标。&#xff09; 注&#xff1a;本文示例使用的是其 vue3 版本 安装 npm install --save-dev iconify/vue 注&am…
阅读更多...
WPF+LibVLC开发播放器-LibVLC播放控制

WPF+LibVLC开发播放器-LibVLC播放控制

接上一篇&#xff1a; LibVLC在C#中的使用 实现LibVLC播放器播放控制 界面 界面上添加一个Button按钮用于控制播放 <ButtonGrid.Row"1"Width"88"Height"24"Margin"10,0,0,0"HorizontalAlignment"Left"VerticalAlignme…
阅读更多...
ffmpeg安装及配置简单教程

ffmpeg安装及配置简单教程

这是ffmpeg官方网站&#xff1a;https://ffmpeg.org/ 这是ffmpeg提供了其他版本的网站&#xff1a;Builds - CODEX FFMPEG gyan.dev 这是ffmpeg提供了提前编译好的可执行文件的github托管网站&#xff1a; https://github.com/BtbN/FFmpeg-Builds/releases 一般windows版本…
阅读更多...
Qt-界面优化QSS

Qt-界面优化QSS

QSS介绍 先说下CSS&#xff1a; 在⽹⻚前端开发领域中, CSS 是⼀个⾄关重要的部分. 描述了⼀个⽹⻚的 "样式". 从⽽起到对⽹⻚美化的作⽤。 Qt 仿照 CSS 的模式, 引⼊了 QSS, 来对 Qt 中的控件做出样式上的设定 。 CSS的功能很强大&#xff0c;QSS要逊色一些&#…
阅读更多...
后端-一对一的数据封装的两种写法对比

后端-一对一的数据封装的两种写法对比

方式一特点&#xff1a;上面的普通封装可以删掉&#xff0c;也可以留着。 注意⚠️&#xff1a;下面的特殊封装的property的值是属性.字段。&#xff08;category.id...) column是sql重命名之后的字段&#xff0c;如果没有重命名是数据库中的值。 方式二特点&#xff1a;上面的…
阅读更多...
CTF之密码学（密码特征分析）

CTF之密码学（密码特征分析）

一.MD5,sha1,HMAC,NTLM 1.MD5&#xff1a;MD5一般由32/16位的数字(0-9)和字母(a-f)组成的字符串 2.sha1&#xff1a;这种加密的密文特征跟MD5差不多&#xff0c;只不过位数是40&#xff08;sha256&#xff1a;64位&#xff1b;sha512:128位&#xff09; 3.HMAC&#xff1a;这…
阅读更多...
网络安全框架及模型-PPDR模型

网络安全框架及模型-PPDR模型

网络安全框架及模型-PPDR模型 概述： 为了有效应对不断变化的网络安全环境，人们意识到需要一种综合性的方法来管理和保护网络安全。因此，PPDR模型应运而生。它将策略、防护、检测和响应四个要素结合起来，提供了一个全面的框架来处理网络安全问题。 工作原理： PPDR模型的…
阅读更多...
QT6学习第八天 QFrame 类

QT6学习第八天 QFrame 类

QT6学习第八天 QFrame 类族QLabel 标签部件按钮部件QLineEdit 行编辑器部件QAbstractSpinBoxQAbstractSlider 今天来学一学 QFrame 类。 QFrame 类族 QFrame 类是带有边框的部件的基类。它的子类包括常用的标签部件 QLabel、以及 QLCDNumber、QSplitter、QStackedWidget、QToo…
阅读更多...
c++预编译头文件

c++预编译头文件

文章目录 c预编译头文件1.使用g编译预编译头文件2.使用visual studio进行预编译头文件2.1visual studio如何设置输出预处理文件&#xff08;.i文件&#xff09;2.2visual studio 如何设置预编译&#xff08;初始创建空项目的情况下&#xff09;2.3 visual studio打开输出编译时…
阅读更多...
简单快速的上手python

简单快速的上手python

前言 python是一门可以快速上手的语言&#xff0c;原因是它语法简单&#xff0c;api容易使用自由灵活 当我们需要安装任何的三方库时&#xff0c;只需要执行 pip install XX 之后在代码里面import xxx就可以使用python啦。 并且python的代码自由灵活&#xff0c;使用缩进区…
阅读更多...
【NLP高频面题 - LLM架构篇】旋转位置编码RoPE相对正弦位置编码有哪些优势？

【NLP高频面题 - LLM架构篇】旋转位置编码RoPE相对正弦位置编码有哪些优势？

【NLP高频面题 - LLM架构篇】旋转位置编码RoPE相对正弦位置编码有哪些优势&#xff1f; 重要性&#xff1a;⭐⭐⭐ &#x1f4af; NLP Github 项目&#xff1a; NLP 项目实践&#xff1a;fasterai/nlp-project-practice 介绍&#xff1a;该仓库围绕着 NLP 任务模型的设计、训练…
阅读更多...
论文：IoU Loss for 2D/3D Object Detection

论文：IoU Loss for 2D/3D Object Detection

摘要&#xff1a;在2D/3D目标检测任务中&#xff0c;IoU (Intersection-over- Union)作为一种评价指标&#xff0c;被广泛用于评价不同探测器在测试阶段的性能。然而&#xff0c;在训练阶段&#xff0c;通常采用常见的距离损失(如L1或L2)作为损失函数&#xff0c;以最小化预测值…
阅读更多...
STM32 HAL库开发学习1.STM32CubeMX 新建工程

STM32 HAL库开发学习1.STM32CubeMX 新建工程

STM32 HAL库开发学习1.STM32CubeMX 新建工程 一、 STM32 CubeMX 下载二、CubeMX 功能介绍1. 固件包路径设置2. 新建工程 三、创建项目实例1. 新建项目2. GPIO 管脚设置3. GPIO 窗口配置4. 调试设置5. 时钟配置6. 项目管理&#xff08;1&#xff09;项目信息&#xff08;2&#…
阅读更多...
最新文章

Copyright @ 2022~2023