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

经常逛 VPS 论坛的朋友，可能都见过一些网友在出售 VPS 。而每次交易时，双方最关心的一个问题就是 —— 剩余价值怎么计算？为此，一款VPS 剩余价值计算器应运而生，帮助大家快速、准确计算出 VPS 当前的剩余价值。

可能感兴趣：

VPS 剩余价值是如何计算的？

其实原理并不复杂，核心是基于时间比例进行价值分配。整个计算过程可以简化为以下几个步骤：

计算总服务天数：即购买日期到到期日之间的总天数。
计算每天的价值：将购买价格平均分配到每一天。
计算已使用天数：当前日期与购买日期之间的天数。
计算剩余天数：到期日期与当前日期之间的天数。
计算剩余价值：用剩余天数 × 每日服务价值，即得当前的剩余价值。

这种计算方法假设VPS服务价值在整个服务期内是均匀分布的，即每一天的服务价值相同，适用于大多数订阅式服务的剩余价值计算。

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

在制作这款天气动画版 VPS 剩余价值计算 器前，我先了解了一下前辈们的设计，在 Google 上搜索 “VPS 剩余价值计算器” 排名第一的是飞虫大佬设计的页面。很实用，页面也足够简单。

排名第二的是 aiofchina 的计算器。页面依旧十分简洁，简洁之余，添加了货币选择。这种情况肯定是考虑到所购买的 VPS 大都是以美元或欧元支付。可见页面设计者是个很细心的人。（https://vps.aiofchina.com/）

排名第三的是 521990 工具站，设计上没有什么亮点，但是在功能上更加贴心。需要输入的条件更多，比如续费价格、账户余额以及交易价格等条件。最为友好的是自动匹配汇率，但我不确定是否是按照每天的实时汇率所变动（大概率无，因为每次刷新网页，汇率情况无任何变动）。（https://tools.521990.xyz/mjj）

接下来我又继续在 Bing 上搜索，发现两款具有设计美感的页面。一款是来自倾城于你博客大佬的设计，页面添加背景图片，同时也将 VPS 的配置加入，最后还贴心的可以生成分享卡片。不得不说，功能很全，看起来也很舒适。

另外一款（https://tools.196000.xyz/jsq/）我个人认为在设计上最符合我个人审美的页面。而且该计算器的汇率确实是实时变动的，而且一个简单的渐变背景，给人的感觉就很舒适。同时也提供了图片分享链接。我个人蛮喜欢这位前辈的设计。

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 太强了！打造炫酷的动画天气卡片）。在此基础上，帮我生成了最终的页面。

该页面不仅功能完整，而且视觉上还带了些趣味性。点击计算按钮时，还有一个小过渡动画，非常符合我“能用还得好看”的设计理念。

使用说明 & 在线体验地址

目前，这款 AI 生成的天气动画版 VPS 剩余价值计算器已经上线，访问地址如下：

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

无需安装、无需注册，网页打开即可使用。只需输入：

购买时的总价格
购买日期
付款周期（年付、月付、季付等）

点击“计算”，就能立刻获取剩余价值估算，动画切换天气效果也相当治愈。

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

可能感兴趣：

总结一下

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

如果你也经常参与 VPS 转让、MJJ 社区交易等，或者单纯想练练 AI + 网页项目的能力，这款小工具可能会给你带来一些新思路。欢迎大家试用，也欢迎把你们更好的版本分享到社区！

本文标题：我用 AI 做了一个 VPS 剩余价值计算器（天气动画版）
本文链接：https://uuzi.net/ai-powered-vps-remaining-value-calculator-weather-animation/
本文标签：VPS 剩余价值计算器、AI 网页工具、在线 VPS 工具、服务器转让估价、Claude 代码生成
发布日期：2025年4月12日
更新日期：2025年4月12日
版权声明：兔哥原创内容，版权所有人为本网站作者，请勿转载，违者必究！
免责声明：文中如涉及第三方资源，均来自互联网，仅供学习研究，禁止商业使用，如有侵权，联系24小时内删除！