使用多款AI开发延迟退休计算器

原创

一起重学前端

修改于 2024-09-19 09:51:28

17100

代码可运行

运行总次数：0

代码可运行

前言

近日，延迟退休话题如同一颗重磅炸弹，在全网引发了热烈的讨论与广泛的关注。这一政策的出台，不仅关乎着每一位劳动者的切身利益，更是对国家经济社会发展具有深远的影响。于是我就想着用MarsCode、TX元宝、文心一言3.5、智谱清言、ChatGpt3.5等ai工具生成一套退休计算器。（讲实话，在某些情况下，代码自动补全还是挺好用，比如：写接口校验时自动提示，但是如果想要用这些工具直接生成完整代码，个人觉得生产力还是有待提升，闲话不多说，先看看各家ai输出，show their the code）

实际需求

先看几个网上的

金山文档

头条

现在统一问题：在前端实现一个退休计算器，你可以创建一个简单的网页，利用HTML、CSS和JavaScript来收集用户输入并计算退休年龄。 开问

MarsCode

先问豆包MarsCode

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>退休计算器</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background-color: #f0f0f0;
      }

      .container {
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
        text-align: center;
        max-width: 400px;
        margin: auto;
      }

      h1 {
        color: #333;
      }

      form label {
        display: block;
        margin-bottom: 5px;
        color: #555;
      }

      form input,
      form select {
        width: 100%;
        padding: 10px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }

      form button {
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 10px 20px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

      form button:hover {
        background-color: #0056b3;
      }

      #result {
        margin-top: 20px;
        color: #333;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>退休计算器</h1>
      <form id="retirement-form">
        <label for="age">您的年龄：</label>
        <input type="number" id="age" required />
        <label for="gender">性别：</label>
        <select id="gender" required>
          <option value="male">男</option>
          <option value="female">女</option>
        </select>
        <button type="submit">计算</button>
      </form>
      <div id="result"></div>
    </div>
    <script>
      const form = document.getElementById("retirement-form");
      const resultDiv = document.getElementById("result");

      form.addEventListener("submit", function (e) {
        e.preventDefault();

        const age = parseInt(document.getElementById("age").value);
        const gender = document.getElementById("gender").value;

        let retirementAge;
        if (gender === "male") {
          retirementAge = 60; // 假设男性法定退休年龄为60岁
        } else {
          retirementAge = 55; // 假设女性法定退休年龄为55岁
        }

        const currentYear = new Date().getFullYear();
        const retirementYear = currentYear + (retirementAge - age);

        resultDiv.innerHTML = `您将在 ${retirementYear} 年退休。`;
      });
    </script>
  </body>
</html>

codepen

缺少延迟退休算法，大佬们能打几分

豆包

好奇～豆包和豆包MarsCode生成的代码还不一样。代码就不放文章中了，codepen可以看大佬们看看这个又打几分

ChatGPT3.5

document
        .getElementById("calculateBtn")
        .addEventListener("click", function () {
          const age = parseInt(document.getElementById("age").value);
          const gender = document.getElementById("gender").value;

          if (isNaN(age) || age < 0) {
            alert("请输入有效的年龄");
            return;
          }

          let retirementAge,
            originalRetirementAge,
            currentYear,
            reformRetirementAge;

          // 根据性别设置退休年龄
          if (gender === "male") {
            originalRetirementAge = 60;
            reformRetirementAge = 65; // 假设改革后法定退休年龄为65岁
          } else {
            originalRetirementAge = 55;
            reformRetirementAge = 60; // 假设改革后法定退休年龄为60岁
          }

          // 计算退休时间
          currentYear = new Date().getFullYear();
          retirementAge = originalRetirementAge - age;
          let reformRetirementYear = currentYear + (reformRetirementAge - age);

          // 显示结果
          const resultDiv = document.getElementById("result");
          resultDiv.innerHTML = `
        原定退休年龄: ${originalRetirementAge}岁, 剩余时间: ${retirementAge}年<br>
        改革后法定退休年龄: ${reformRetirementAge}岁, 退休年份: ${reformRetirementYear}
    `;
        });

其他

TX元宝

文心一言3.5

其他几个都是类似的，都是缺失延迟退休具体的算法，导致生成的代码只是一个空壳子

自己动手实现一个

延迟退休逻辑

男 1965-1月延迟一个月每4个月多延迟1月 1975-9 延迟3年 63
女原55岁退休 1970-1月延迟一个月每4个月多延迟1月 1981-9 延迟3年 58
女原50岁退休 1975-1月延迟一个月每2个月多延迟1月 1984-11 延迟3年 58

主要逻辑：计算延迟退休月份

//计算延迟退休月份
  const calculateDelayMonths = () => {
    const year = date.year();
    const month = date.month() + 1;
    if (sex === 1) {
      if (year < 1965) {
        return 0;
      }
      if (year > 1976) {
        return 36;
      }
      // 计算基本延迟月份数
      let baseDelayMonths = Math.ceil(month / 4);
      // 根据年份计算额外延迟月份数
      let extraDelayMonths = (year - 1965) * 3;
      // 总延迟月份数
      let delayMonths = baseDelayMonths + extraDelayMonths;
      // 特殊情况处理：1976年9月至12月
      if (year === 1976 && month >= 9) {
        delayMonths = 36;
      }
      return delayMonths;
    }
    if (sex === 2) {
      if (year < 1970) {
        return 0;
      }
      if (year > 1981) {
        return 36;
      }
      // 计算基本延迟月份数
      let baseDelayMonths = Math.ceil(month / 4);
      // 根据年份计算额外延迟月份数
      let extraDelayMonths = (year - 1970) * 3;
      // 总延迟月份数
      let delayMonths = baseDelayMonths + extraDelayMonths;
      // 特殊情况处理：1981年9月至12月
      if (year === 1981 && month >= 9) {
        delayMonths = 36;
      }
      return delayMonths;
    }
    if (sex === 3) {
      if (year < 1975) {
        return 0;
      }
      if (year > 1984) {
        return 60;
      }
      // 计算基本延迟月份数
      let baseDelayMonths = Math.ceil(month / 2);
      // 根据年份计算额外延迟月份数
      let extraDelayMonths = (year - 1975) * 6;
      // 总延迟月份数
      let delayMonths = baseDelayMonths + extraDelayMonths;
      // 特殊情况处理：1984年11月至12月
      if (year === 1984 && month >= 11) {
        delayMonths = 60;
      }
      return delayMonths;
    }
  };

dom 因为是准备同步h5、小程序，所以使用的Taro开发

<View className='content'>
        <View className='h2'>快查～你最新的延迟退休年龄</View>
        <View className='tips'>
          按照《关于实施渐进式延迟法定退休年龄的决定》附表对照关系，您通过法定退休年龄计算器，选择出生年月、性别及人员类型，即可计算出对应的
          改革后法定退休年龄、改革后退休时间、延迟月数。
        </View>
        <View
          style={{
            padding: "8px 24px",
          }}
        >
          <View className='label' style={{ width: "auto", minWidth: "140px" }}>
            &emsp;&emsp;&emsp;出生年月：
          </View>
          <Picker
            mode='date'
            style={{ width: "240px" }}
            onChange={(d) => {
              const { value } = d.detail
              setDate(moment(value, "YYYY-MM-DD"));
            }}
            picker='month'
            placeholder='请选择出生年月'
          >
            <View className='picker'>{date ? date.format("YYYY-MM-DD") : '请选择出生年月'}</View>
          </Picker>
        </View>
        <View
        >
          <View className='label' style={{ width: "auto", minWidth: "140px" }}>
            性别及人员类型：
          </View>
          <Picker
            mode='selector'
            range={selector}
            style={{ width: "240px" }}
            rangeKey='label'
            onChange={(e) => {
              const { value } = e.detail;
              setSex(Number(value) + 1);
            }}
          >
            <View className='picker'>{sex ? selectorMap[sex] : '请选择性别'}</View>
          </Picker>
        </View>
        <View className='btn'>
          <Button
            type='default'
            onClick={() => {
              if (!date || !sex) {
                Taro.showToast({
                  title: "请选择出生年月和性别",
                  icon: "error",
                  duration: 2000,
                });
                return;
              }
              handleSubmit()  
          >
            计算
          </Button>
        </View>
        <View 
          className='result'
        >
        {age && (
          <View
            style={{
              padding: "8px 24px",
            }}
          >
            <Text style={{ width: "120px" }}>您的改革后法定退休年龄为：</Text>
            <Text>{age}</Text>
          </View>
        )}
        {offTime && (
          <View
            style={{
              padding: "8px 24px",
            }}
          >
            <Text style={{ width: "120px" }}>您的改革后退休时间为：</Text>
            <Text>{offTime}</Text>
          </View>
        )}
        {delayMonths && (
          <View
            style={{
              padding: "8px 24px",
            }}
          >
            <Text style={{ width: "120px" }}>您的延迟月数为：</Text>
            <Text>{delayMonths}个月</Text>
          </View>
        )}
        </View>
      </View>

总结

个人理解，辅助开发，可以提高开发效率，不可完全依赖～欢迎吐槽

缺点：

AI 理解偏差：AI 生成的代码有时可能不完全符合开发者的预期，需要开发者对生成的代码进行进一步的审查和修改。这就要求开发者不仅要掌握编程知识，还要对 AI 的工作方式和特点有一定的了解，以便更好地使用该工具。
功能局限性：虽然 MarsCode 在很多方面表现出色，但在一些特定的、复杂的开发场景下，可能无法完全满足开发者的需求。例如，对于一些高度定制化的项目或需要深入底层操作的任务，AI 生成的代码可能不够灵活和准确，仍然需要开发者进行大量的手动编写和调整。

优点：

1.强大的 AI 辅助功能：

智能代码补全：能够根据开发者输入的部分代码，快速准确地预测并补全后续代码，大大提高了编码的速度和效率，减少了手动输入的工作量和可能出现的低级错误。例如，在编写复杂的逻辑代码时，它可以快速给出合适的代码片段建议。
代码生成：只需简单的指令或描述，就可以自动生成较为完整的代码模块。这对于一些重复性的、有固定模式的代码编写任务非常有用，比如创建基础的数据库操作代码、简单的函数封装等。
代码解释：可以快速精准地解释项目代码，帮助开发者理解不熟悉的代码逻辑或复杂的算法，对于学习新的代码库或理解他人编写的代码非常有帮助。
缺陷修复建议：能够识别代码中的潜在问题和错误，并提供优化的解决方案和修复建议，帮助开发者更快地调试代码，提高代码的质量。

2.提高部分开发效率

3.持续学习和改进