logo NodeSeekbeta
search for post search for people use google search

VPS剩余价值计算器

Iris415
Iris415楼主
in 技术
#0

昨天闲的没事找GPT做了个VPS剩余价值计算器，画面比较简陋，但是能用。部署在worker上使用，有需要的大家自行部署使用吧。

  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const html = `
  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VPS剩余价值计算器</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        padding: 20px;
        background-image: url('https://your-custom-background-image-url.com'); /* 自定义背景图 URL */
        background-size: cover;
        background-position: center;
        height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        backdrop-filter: blur(15px); /* 设置背景模糊 */
      }
      .container {
        max-width: 500px; /* 设置表单的最大宽度为500px */
        margin: 0 auto;
        background-color: rgba(255, 255, 255, 0.85); /* 表单背景带透明度 */
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 为表单增加阴影 */
      }
      h1 { 
        color: #333; 
        text-align: center;
      }
      label { 
        display: block; 
        margin-bottom: 8px; 
        color: #333; 
      }
      input, select { 
        margin-bottom: 15px; 
        padding: 8px; 
        width: 100%; 
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      button { 
        padding: 10px; 
        background-color: #28a745; 
        color: white; 
        border: none; 
        border-radius: 5px;
        cursor: pointer; 
        width: 100%;
      }
      button:hover { 
        background-color: #218838; 
      }
      .result { 
        margin-top: 20px; 
        padding: 10px; 
        background-color: #dff0d8; 
        border: 1px solid #d6e9c6; 
        color: black; 
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>VPS剩余价值计算器</h1>
      <form id="calculator-form">
        <label for="purchaseAmount">购买金额 (人民币):</label>
        <input type="number" id="purchaseAmount" placeholder="请输入购买金额" required>

        <label for="renewalAmount">续费金额 (所选货币):</label>
        <input type="number" id="renewalAmount" placeholder="请输入续费金额" required>

        <label for="currency">货币种类:</label>
        <select id="currency" required>
          <option value="USD">美元 (USD)</option>
          <option value="CNY">人民币 (CNY)</option>
          <option value="EUR">欧元 (EUR)</option>
          <option value="GBP">英镑 (GBP)</option>
          <option value="AUD">澳大利亚元 (AUD)</option>
          <option value="JPY">日元 (JPY)</option>
          <option value="MYR">马来西亚林吉特 (MYR)</option>
          <option value="SGD">新加坡元 (SGD)</option>
        </select>

        <label for="paymentCycle">付款周期:</label>
        <select id="paymentCycle" required>
          <option value="monthly">月付</option>
          <option value="quarterly">季付</option>
          <option value="semiannually">半年付</option>
          <option value="yearly">年付</option>
          <option value="biennially">两年付</option>
          <option value="triennially">三年付</option>
        </select>

        <label for="purchaseDate">购买日期 (今天):</label>
        <input type="date" id="purchaseDate" value="${new Date().toISOString().slice(0, 10)}" required>

        <label for="expiryDate">到期日期 (下次续费时间):</label>
        <input type="date" id="expiryDate" required>

        <button type="button" onclick="calculate()">计算</button>
      </form>

      <div id="result" class="result" style="display:none;"></div>
    </div>

    <script>
      async function fetchExchangeRate(fromCurrency, toCurrency) {
        try {
          const response = await fetch(\`https://open.er-api.com/v6/latest/\${fromCurrency}\`);
          const data = await response.json();
          return data.rates[toCurrency];
        } catch (error) {
          console.error('获取汇率时出错:', error);
          return null;
        }
      }

      async function calculate() {
        const purchaseAmount = parseFloat(document.getElementById('purchaseAmount').value);
        const renewalAmount = parseFloat(document.getElementById('renewalAmount').value);
        const currency = document.getElementById('currency').value;
        const exchangeRateToCNY = await fetchExchangeRate(currency, 'CNY'); // 动态获取货币到人民币的汇率
        if (!exchangeRateToCNY) {
          document.getElementById('result').innerHTML = '获取汇率时出错，请稍后再试。';
          document.getElementById('result').style.display = 'block';
          return;
        }

        const paymentCycle = document.getElementById('paymentCycle').value;
        const purchaseDate = new Date(document.getElementById('purchaseDate').value);
        const expiryDate = new Date(document.getElementById('expiryDate').value);

        const today = new Date();
        const totalDays = Math.floor((expiryDate - today) / (1000 * 60 * 60 * 24)); // 计算到期日期与今日的天数差
        if (totalDays <= 0) {
          document.getElementById('result').innerHTML = 'VPS已过期。';
          document.getElementById('result').style.display = 'block';
          return;
        }

        // 根据付款周期设定天数
        let cycleDays;
        switch (paymentCycle) {
          case 'monthly':
            cycleDays = 30;
            break;
          case 'quarterly':
            cycleDays = 90;
            break;
          case 'semiannually':
            cycleDays = 180;
            break;
          case 'yearly':
            cycleDays = 365;
            break;
          case 'biennially':
            cycleDays = 730;
            break;
          case 'triennially':
            cycleDays = 1095;
            break;
          default:
            cycleDays = 30; // 默认月付
        }

        // 剩余价值计算
        const remainingValue = (totalDays / cycleDays) * renewalAmount;
        const remainingValueCNY = remainingValue * exchangeRateToCNY; // 将续费金额转换为人民币

        // 溢价金额 = 购买金额 - 剩余价值
        const premiumAmount = purchaseAmount - remainingValueCNY;

        document.getElementById('result').innerHTML = \`
          <strong>剩余天数:</strong> \${totalDays} 天<br>
          <strong>剩余价值 (人民币):</strong> \${remainingValueCNY.toFixed(2)} CNY<br>
          <strong>溢价金额 (人民币):</strong> \${premiumAmount.toFixed(2)} CNY<br>
        \`;
        document.getElementById('result').style.display = 'block';
      }
    </script>
  </body>
  </html>
  `;

  return new Response(html, {
    headers: { "content-type": "text/html;charset=UTF-8" },
  });
}

image

你好啊，陌生人!

我的朋友，看起来你是新来的，如果想参与到讨论中，点击下面的按钮！
登录 注册

快捷功能区

所有版块

📈用户数目📈

目前论坛共有72033位seeker

🎉欢迎新用户🎉

Traveler
Traveler
lijinvlx
lijinvlx
vydc
vydc
鸿运商行
鸿运商行
auooooook
auooooook
espino
espino
hjuh
hjuh
王烟洛
王烟洛