科技前沿

我用 AI 做了一个 VPS 剩余价值计算器(天气动画版)

在借鉴了其它前辈优秀的设计后,我也跟着使用 AI 帮我生成了一款VPS 剩余价值计算器。动画版是在无意中生成的,生成效果却意外的好,大家也可以尝试生成一下。

经常混迹于 VPS 论坛的小伙伴们,应该都见过不少网友在转让或求购 VPS 。每一次交易时,买卖双方最纠结的问题就是 —— 剩余价值到底该怎么算?于是,一款VPS 剩余价值计算器就顺理成章地诞生了,旨在帮助大家快速、准确地估算出 VPS 当前的剩余价值。

你可能也喜欢:

  • Grok AI 手机客户端下载,比 ChatGPT 更智能、时效性更强
  • 大陆国行版苹果设备可以使用 AI ,但可能不是你以为的 AI
  • 哪个免费 AI 智能聊天机器人最好用?我测了十几个,这些值得推荐

VPS 剩余价值是怎么算出来的?

其实原理一点都不复杂,核心思路就是按时间比例来分配价值。整个计算流程可以拆解成下面几步:

  1. 算出总服务天数:也就是从购买那天到到期那天之间一共有多少天。
  2. 算出每天的服务费:把购买价格平摊到每一天。
  3. 算出已用天数:当前日期减去购买日期的天数。
  4. 算出剩余天数:到期日期减去当前日期的天数。
  5. 算出剩余价值:用剩余天数乘以每日服务费,就得到了当前的剩余价值。

这种算法假设 VPS 服务在整个周期内价值是均匀分布的,也就是说每天的服务价值都一样,这也适用于绝大多数订阅类服务的剩余价值计算。

VPS 剩余价值计算器页面设计参考

在动手做这款天气动画版 VPS 剩余价值计算器之前,我先参考了前辈们的设计思路。在 Google 搜索 “VPS 剩余价值计算器” ,排名第一的是飞虫大佬的页面。非常实用,界面也足够简洁。

飞虫大佬的VPS剩余价值计算器截图

排在第二名的是 aiofchina 的计算器。页面同样十分简约,不过在此基础上加入了货币选择功能。这显然考虑到了很多 VPS 都是以美元或欧元结算的,可见页面制作者是个很细心的人。(https://vps.aiofchina.com/)

aiofchina计算器截图

排名第三的是 521990 工具站,设计上中规中矩,但功能方面更加贴心了。需要填写的条件更多,比如续费价格、账户余额以及交易价格等。最人性化的是自动匹配汇率,不过我不确定它是不是跟着每天的实时汇率在变(大概率没有,因为每次刷新页面,汇率数值都没变化)。(https://tools.521990.xyz/mjj)

521990工具站截图

接着我又在 Bing 上搜了一下,发现了两款设计感比较强的页面。一款来自倾城于你博客大佬,页面加了背景图,还把 VPS 配置也展示出来了,最后甚至能生成分享卡片。不得不说,功能齐全,看着也舒服。

倾城于你博客的VPS计算器截图

另一款(https://tools.196000.xyz/jsq/)我个人觉得在设计上最符合我的审美。而且它的汇率确实是实时变动的,简单一个渐变背景,看起来就很舒服。同时也提供了图片分享链接。我个人很喜欢这位大佬的设计。

tools.196000.xyz计算器截图

用 AI 设计 VPS 剩余价值计算器的过程

看了上面这么多前辈的优秀作品,我也忍不住想自己搞一个。但我不太想手写代码(其实也不会),所以干脆直接求助 AI!

从上面这些页面可以看出,要计算 VPS 剩余价值,其实只需要 购买时价格、到期时间、以及付款周期 三个条件就够了。这样一来,我向 AI 提需求时就能把条件说清楚。而且我觉得输入条件太多会让人眼花缭乱,频繁填各种信息反而浪费时间,所以我决定一切从简。

我用的 AI 是 Claude 3.7 Sonnet,它目前在前端代码生成方面的能力确实很出众。同样的提示词我丢给了 ChatGPT、Grok、DeepSeek 试了一下,结果这些 AI 生成的页面要么过于简陋,要么直接没法正常显示。

VPS 剩余价值计算器(天气动画版)提示词:

创建一个包含 CSS 和 JavaScript 的单个 HTML 文件,用于生成计算 VPS 剩余价值的动画网页。网页应当通过动画直观地展示 VPS 剩余价值:包括 VPS 购买时价格、VPS 购买时间、付款周期以复选框方式可选:年付、月付、季付、半年付、三年付。最后有一个计算剩余价值的按钮,点击后给出剩余价值。最好在点击之后有一个过渡动画。在此文件中提供所有 HTML、CSS 和 JavaScript 代码。JavaScript 应包含一种在不同天气条件之间切换的方法(例如,一个函数或一组按钮),以演示每种天气条件的动画。整个网页和页面滚动条禁止出现抖动现象。

实际上,做出这款天气版的 VPS 剩余价值计算器 ,完全是个意外收获。我本来没打算做成天气版,大家可以看到提示词里并没有要求生成晴天、雨天、雪天的文字。我猜是 Claude 记住了我之前让它做过炫酷动画天气卡片网页的经历(Claude 3.7 Sonnet 太强了!打造炫酷的动画天气卡片),在此基础上帮我生成了这个最终页面。

这个页面不仅功能完整,视觉上还多了些趣味性。点击计算按钮时有一个小过渡动画,完全符合我“好用还要好看”的设计理念。

天气动画版VPS剩余价值计算器截图

使用说明 & 在线体验地址

现在,这款 AI 生成的天气动画版 VPS 剩余价值计算器已经正式上线,访问地址如下:

👉 https://uuzi.net/vpstime.html

无需安装、无需注册,打开网页就能直接用。只需输入:

  • 购买时的总价格
  • 购买日期
  • 付款周期(年付、月付、季付等)

点击“计算”,立刻就能看到剩余价值估算结果,动画切换天气效果也很治愈。

当然,如果你也有设计灵感,可以用同样的提示词让 AI 帮你生成一个更炫酷、更符合你审美的计算器页面。

你可能也喜欢:

  • 网友想通过 Claude 会员生成无法被检测出 AI 写作的文章,没想到…
  • 想让工作效率翻倍?这份AI工具合集你不能错过
  • 马斯克震惊:互联网大数据枯竭将成AI毁灭性打击

总结一下

  • 这款VPS 剩余价值计算器基于时间比例模型,适合绝大多数订阅服务的转让价值评估。
  • 页面支持天气动画切换,提升了用户交互体验。
  • 输入项简洁,计算逻辑清晰,适合日常使用或交易估价。
  • 使用了 Claude 生成的完整 HTML 页面,也算是 AI 参与开发的一个小展示。
TechFlow

发表评论

您的邮箱地址不会被公开。必填项已用 * 标注。