快速生成你的“从夯到拉”排行榜 · 语雀

Redis实现排行榜 写入分数汇总表使用了INSERT ON DUPLICATE KEY UPDATE的操作,第一次写入是插入操作,后续同一个用户在同一个榜单内的数据都是update sum_score字段的操作,并判断是否更新last_incom_time字段。子榜单也视为一个独立的榜单,相较于总榜单,使用的用户分数明细数据是相同的一份数据,只不过是统计的时间维度不同,所以根据分数的类型去找关联的榜单列表时,需要将时间因素加进去,对找出来的所有榜单同时去写排名相关的数据,就可以实现子榜单的玩法。 阅读详情

快速生成你的“从夯到拉”排行榜

在当前的社交网络和论坛中,给万物排名已经成为一种直观的表达方式。从游戏角色的强度、数码配件的性价比,到日常的奶茶和穿搭,大家习惯用一套直观的层级来对事物进行“锐评”。

近期流行的“从夯到拉”评价体系,本质上就是一种极简的 5 级分类法:

  • 夯:顶级之上的天花板,强到无需多言。
  • 顶级:标杆水平,几乎没有瑕疵。
  • 人上人:中上游,性价比高,体验优秀。
  • NPC:平庸无奇,中规中矩的工具人角色。
  • 拉完了:垫底的地板砖,体验极差,不推荐。

如果你也想快速制作一张类似的九宫格或阶梯式强度图,分享自己的观点,可以使用我开发的这款纯网页端工具。


在这里插入图片描述

1. 自由定制分类标签

网页默认提供标准的 Tier List 模板,你可以随时双击左侧的分类名称,将其修改为“夯”、“顶级”、“人上人”、“NPC”、“拉完了”,或者任何你喜欢的网络热梗与自定义评级。

2. 纯本地图片拖拽操作
  • 支持直接从本地拖拽多张图片到网页底部的暂存区。
  • 通过鼠标拖动,将图片分配到不同的层级行中。
  • 纯前端本地处理,图片不需要上传到云端服务器,保障隐私安全与响应速度。
3. 灵活的行列管理
  • 支持自由调整每一行的背景颜色,以便区分不同梯队。
  • 可以一键在任意位置新增一行,或删除不需要的评级行。
  • 支持一键清空或重新排序。
4. 高清图片导出

排版完成后,点击导出按钮,系统会直接在本地将当前表格渲染并保存为一张高清 PNG 图片,方便你直接分享到小红书、抖音、B站、微博或贴吧等社交平台。


适用场景

  • 游戏玩家:分析新版本的英雄强度、武器配件或关卡难度。
  • 数码爱好者:横向对比各大品牌手机、显卡或外设的性价比。
  • 日常吐槽:对打工人的摸鱼姿势、周一到周五的心情、各大奶茶店的新品进行主观锐评。

工具地址

https://www.tooladd.com/auth/tier-list-maker

推荐一款傻瓜式生成三维柱状排行榜的工具——小皮排行榜 这年头很多人想做自媒体账号,像抖音、快手等,赛道很多,有些需要美貌、有些需要口才,我这里推荐一个无需露脸无需口才的视频赛道。编辑完数据即可播放动画,在播放的同时即可录制视频,然后上传到视频平台进行后期编辑发布。》,这是一款傻瓜式配置数据即可生成三维柱状排行榜的动画视频。也支持导入AI生成的排行榜数据,快速生成动画。下载地址可以自行某度 “小皮三维排行榜”支持手动编辑表格数据,生成排行榜动画。 阅读详情

相关推荐

夯到拉排名系统开发[可运行源码]

本文详细记录了从零开发“夯到拉”垂直排名系统网页的全过程,包括需求分析、技术选型、核心功能实现及优化方案。系统支持图片上传、拖拽排序功能,包含五个等级(夯、顶级、人上人、NPC、拉)的垂直展示,每个等级具有独特的背景色和交互逻辑。技术栈采用HTML5拖放API、Tailwind CSS和原生JavaScript,实现了轻量高效的解决方案。文章还分享了开发中遇到的典型问题(如图片丢失、拖拽反馈不明显)及其解决方案,并提出了后续优化方向(如本地存储、批量操作)。项目体现了从需求拆解到最终落地的完整开发流程,为类似排名系统的开发提供了参考。

从夯到拉排名

从夯到拉排名HTML

qq_42726819的博客 2134

夯到拉垂直排名系统[源码]

夯到拉垂直排名系统是一个基于拖拽操作的图片排名工具,用户可以通过上传图片并拖拽到不同等级区域进行分类和排序。系统支持跨等级调整图片位置,提供清晰的等级划分(如“顶级”、“人上人”、“NPC”等),并允许用户上传JPG、PNG、GIF格式的图片(单张不超过5MB)。操作简单直观,包括从图片库拖拽图片到等级行、调整已放置图片的位置以及删除图片等功能。此外,系统还提供了使用帮助和清空所有数据的选项,方便用户快速上手和管理内容。

从夯到拉排行网页制作

本文详细记录了开发「夯到拉」垂直排名系统网页的全过程。该系统提供5个等级(夯、顶级、人上人、NPC、拉)的垂直排名展示,支持图片上传和拖拽排序功能。开发采用HTML5、TailwindCSS和原生JavaScript技术栈,重点解决了拖拽交互、图片管理、视觉呈现等技术难点。最终实现了一个直观易用的排名系统,支持图片上传、等级拖放、跨级调整和删除操作。文章还总结了开发心得,并提出了图片压缩、数据保存等后续优化方向。

Ghost_wky的博客 6964

LVGL多线程编程避坑指南:从音乐播放器项目看UI与后台任务如何安全协作

本文深入探讨LVGL在多线程环境下的安全协作问题,以音乐播放器项目为例,解析UI与后台任务(如mplayer音频播放器)的典型冲突场景。提供全局互斥锁规范、任务队列异步处理等核心策略,并分享mplayer进程集成方案与进度条优化技巧,帮助开发者规避界面卡顿、内存损坏等常见问题。

weixin_42531494的博客 130

组态王|组态王通过选择日期实现历史数据的查询

②在弹出的【插入通用控件】对话框选择【Calender Control】控件,然后点击【确定】按钮,关闭对话框,然后在画面上适当的位置按住鼠标左键并拖动,绘制出一个矩形框,放开鼠标,就完成了控件的绘制。此函数将指定的时间格式(年,月,日,时,分,秒)转换为以秒为单位的长整型数,转换的时间基准是UTC(格林尼治)1970年1月1日00:00:00。实现内容,通过两个日历控件选择开始日期和结束日期,然后点击【历史数据查询】按钮,在报表中显示对应时间段的数据集。另外你用过哪些组态软件?

做有价值的事,积累有价值的笔记! 4538

2025 前端技术全景图:从“夯”到“拉”排行榜

2025年前端技术趋势速览:TailwindCSS、Vite和TypeScript成为主流,Vue3和React仍是框架双雄。AI驱动开发崛起,传统工具如jQuery和Webpack逐渐退出舞台。技术评价维度聚焦实用性、生态成熟度、学习成本和稳定性。国内开发者需掌握Vue3+Pinia,国际方向建议React+Next.js。性能赛道推荐Three.js和WebAssembly,包管理首选pnpm。核心建议:拥抱AI辅助开发,掌握TS+Vite+Tailwind组合,放弃过时技术栈。

Hu560231的博客 3327

Cgroup对进程所占用的CPU与内存资源同时进行限制的测试

测试环境:Ubuntu。处理器数量:1CPU。内存大小:2048MB。 以下是测试程序mem_cpu_test.c的代码。 将mem_cpu_test.c编译为可以运行的程序mem_cpu_test。 运行程序,并用top命令查看mem_cpu_test所占用的系统资源情况,可以看到,mem_cpu_test使用了50%左右的内存资源,也就是1000MB左右,并占用了接近全部的CPU资源。 关闭以上的程序后,在Cgroup子系统memory和cpu下分别创建进程组test1和test2。 并设置tes

qq_44998067的博客 1149

夯到拉演示器:可能是全网第一个 3D 分层排行榜生成器(Three.js 全 3D 拖拽)

截取当前 3D 画面导出图片,直接发群晒榜## 交互一览| 操作 | 效果 || — | — || 悬停平台 | 触发扫光波 || 悬停卡牌 | 悬浮 + 旋转展示 || 拖拽卡牌 | 火花粒子尾迹 || 松手放置 | 液压锁止 + 光束定格 || 双击卡牌 | 翻转至铭牌背面 || 拖至右下回收区 | 粉碎删除 || 视角锁定 OFF | 自由环绕观察重装矩阵 |## 技术栈-:https://enixz.github.io/3d-tier-list/ ——三个版本全部在线直跑-双击翻转到铭牌背面-

rhineheart的专栏 384

超详细MySQL 8.0安装与配置

MySQL的安装与配置 还不会安装MySQL的同学们,还不会配置MySQL的同学们,赶紧按照下面步骤操作起来,超详细安装步骤如下: 进入MySQL官网 1、点击download 2、点击MySQL Community Server 3、选好选项点击go to download page 4、点击download 5、点击no thanks,just start my download 6、选Server only,点击Next 7、点击Execute 8、点击

Turniper的博客 8730

基于FaceX-Zoo实现的Face Mask Adding人脸戴口罩

人脸系列文章目录 文章目录人脸系列文章目录前言一、加口罩效果二、实现原理二、代码实现 前言 目前人脸加口罩均为在人脸位置贴图式的,非常不真实。前段时间京东开源一个基于PRnet实现的3D口罩拟合人脸,加口罩非常逼真,但是只是单独一个加口罩demo,没有完整的流程。于是本人结合人脸检测,关键点对齐。PRnet加口罩实现一个完整的加口罩流程。只需一个命令简单方便调用,实现人脸加口罩。 https://github.com/JDAI-CV/FaceX-Zoo 一、加口罩效果 下图可以看出效果还是非常逼真的

zengwb的博客 3387

从夯到拉模拟器RankPix windows本地版 exe

“从夯到拉”是中文语境中一种趣味性分级排行表达,从“夯”(最强)至“拉”(最差)分层评价。支持自定义等级名称、颜色与图片素材,通过拖拽实现排序,可生成游戏、影视、动漫、美食等个性化榜单,操作简单,适合社交分享。提供在线模拟器及本地软件下载,支持保存模板与图片预览,兼具创意与实用性。

u010093380的博客 224

100天精通Python(爬虫篇)——第114天:爬虫基础模块之requests基础入门

一、request模块大总结 1. 下载安装 2. 常用属性或方法 3. response.text和response.content的区别: 4. 发送带headers参数请求 5. 发送带参数请求 6. 在headers参数中携带cookie 7. 超时参数timeout的使用 8. proxies代理参数的使用 9. 发送post请求...............

努力让自己发光,对的人才能迎着光而来 11万+

高效工具:语雀Lake文档极速转换Markdown,3步搞定99%场景

### 1.1 跨平台迁移繁琐 - 从语雀迁移到GitHub/GitLab时,格式错乱需手动调整 - 表格、代码块等复杂元素转换成功率不足60% - 单篇5000字文档平均耗时**2小时**修复格式 ### 1.2 本地编辑障碍 - 语雀在线编辑延迟高,离线导出格式不兼容主流编辑器 - 图片链接频繁失效,重新上传率达**83%** - 无法使用Typora等工具进行本地版本控制 ### 1.3

gitblog_00735的博客 516

STM32面试知识点总结分析

通过Boot引脚设定,寻找初始地址初始化栈指针 __initial_sp指向复位程序 Reset_Hander设置异常中断 HardFault_Handler设置系统时钟 SystemInit调用C库函数 _main。

嵌入式技术开发 2511

独创改进 | RT-DETR 引入 Asymptotic Hybrid Encoder | 渐进混合特征解码结构

独创改进🚀! | RT-DETR 引入 Asymptotic Hybrid Encoder | 渐进混合特征解码结构

Coding... 2203

从夯到拉,锐评 28 个后端技术!

事先郑重声明,每个后端技术都有自己的应用场景,很多时候没办法完全公平地去比较。本期鱼皮只是希望帮大家学到知识、认识更多的技术。而且由于我是个学 Java 的,也会带有一定的主观性,某些跟语言绑定的技术我会以 Java 生态作为例子。

努力做最接地气的编程干货分享,感谢关注 1531

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

从夯到拉,锐评 39 个前端技术!

作为开发者,我个人会看重 实用性和生态成熟度。但排名并不代表技术本身的优劣,会具有一定的主观性。

努力做最接地气的编程干货分享,感谢关注 1595

Outlook Express 6 (OE6) for Win7/Win8/Win10

英文版 Outlook Express6.0, 兼容Win7/Win10/WinXP,解压就可用。

IEM模型,地表粗糙度模拟

利用微波反演土壤水分时候,利用IEM模型可以实现对随机地表的模拟

从夯到拉,真实测评知名指纹浏览器产品

跨境电商防关联浏览器测评:比特浏览器以9分夺冠,远超Multilogin(8.5分)、AdsPower(8分)和DolphinAnty(7分)。比特浏览器凭借10个永久免费环境、顶级指纹隔离、丝滑同步操作、实用RPA自动化和优秀云手机功能脱颖而出,防关联效果显著且性价比高。Multilogin虽稳定但价格昂贵,AdsPower自动化强但有偶发bug,DolphinAnty简单免费但功能单一。测评表明,比特浏览器是目前跨境电商账号管理的最优选择。

bitbrowser的博客 871

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

雀魂牌谱屋怎么用:三步搭好你的对局数据分析台,告别“感觉流“麻将

雀魂牌谱屋(amae-koromo)是一款开源的雀魂对局数据分析工具,它把散落在牌谱里的每一局结果变成可视化的统计报告,帮你用数据而不是感觉来判断自己的真实水平。无论你是在金之间反复横跳,还是想冲击王座,这篇上手指南都能让你在一杯茶的时间里看懂它、跑起来、用明白。 ## 先对号入座:你是不是也卡在"再赢一把就升段"的循环里 打了三千局,段位还是上不去;赢了觉得自己思路清晰,输了只能怪"今天运气

gitblog_00623的博客 222

如何使用 Redis 快速实现排行榜?

Redis 的是实现排行榜的高效工具,其天然支持按分数排序、范围查询和原子操作。

篱笆院的狗的博客 1240

优秀策划人必逛的地方,你不会还不知道吧?

网站内含40000+营销案例,涉及了30多个行业,品牌策略、线上直播、节日营销、内容创意等方案,写方案没有灵感,看这个网站总能提供给很多新思路。阿li巴巴矢量图库是阿里旗下的,Icon资源丰富,还可以自定义颜色,也提供免费的字体包下载,想找些小图标给汇报内容增色,找它妥妥的~此外还可以搜索别人公开的知识内容作为参考,一般质量都很高,免费的就很够用,写方案时直接拿出来炒自己的笔记,真的很方便。优秀的策划和文案,也从来不是天生,你要走的路,前人都已经走过,你要做的仅仅是整合、参考、调整、创新……

1098

棋牌斗地主游戏排行榜功能快速开发教程

Matchvs Poker 是一款比较流行的斗地主游戏主要功能如下: 实现了最经典的斗地主玩法,叫地主抢地主等功能。 支持随机匹配模式,主动创建房间邀请微信好友模式两种。 接入Matchvs独立的排行榜系统。 分为客户端和服务端两个部分,client 是使用 Egret 实现的,server 是使用 matchvs gameServer nodejs版实现。项目目录结构如下: ┌-cli...

游戏服务器引擎Matchvs的博客 2007

后端面试必备:如何使用Redis快速实现排行榜系统

排行榜是许多应用中常见的功能,如游戏积分榜、电商热销榜、内容热度榜等。Redis凭借其高性能、丰富的数据结构和原子操作特性,成为实现排行榜的理想选择。本文将详细介绍如何使用Redis快速实现一个高效的排行榜系统。

qq_58299462的博客 1324

基于redis的zset实现排行榜

Sun Frame 是我个人开源的一款基于 SpringBoot 的轻量级框架,专为中小型企业设计。它提供了一种快速、简单且易于扩展的开发方式。

Sun的个人博客 2347
上一篇: 独立开发工具站 - ToolAdd:更新4 个新工具
下一篇: Markdown编辑器 - 一键同步多平台 自媒体内容同步、内容营销、分发工具,自媒体助手,一键同步发布,支持微博头条、今日头条、豆瓣、WordPress、知乎、简书、typecho等各大平台
丘秋_XT
博客等级 码龄9年 71粉丝 52原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值