前言
近日，延迟退休话题如同一颗重磅炸弹，在全网引发了热烈的讨论与广泛的关注。这一政策的出台，不仅关乎着每一位劳动者的切身利益，更是对国家经济社会发展具有深远的影响。于是我就想着用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>
缺少延迟退休算法，大佬们能打几分
豆包
好奇～ 豆包和豆包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}
`;
});
其他
其他几个都是类似的，都是缺失延迟退休具体的算法，导致生成的代码只是一个空壳子～
自己动手
延迟退休逻辑
- 男 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" }}>
   出生年月：
</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 生成的代码可能不够灵活和准确，仍然需要开发者进行大量的手动编写和调整。
优点：
-
强大的 AI 辅助功能：
- 智能代码补全：能够根据开发者输入的部分代码，快速准确地预测并补全后续代码，大大提高了编码的速度和效率，减少了手动输入的工作量和可能出现的低级错误。例如，在编写复杂的逻辑代码时，它可以快速给出合适的代码片段建议。
- 代码生成：只需简单的指令或描述，就可以自动生成较为完整的代码模块。这对于一些重复性的、有固定模式的代码编写任务非常有用，比如创建基础的数据库操作代码、简单的函数封装等。
- 代码解释：可以快速精准地解释项目代码，帮助开发者理解不熟悉的代码逻辑或复杂的算法，对于学习新的代码库或理解他人编写的代码非常有帮助。
- 缺陷修复建议：能够识别代码中的潜在问题和错误，并提供优化的解决方案和修复建议，帮助开发者更快地调试代码，提高代码的质量。
-
提高部分开发效率
-
持续学习和改进
- AI可以持续学习改进，并根据开发者习惯，不断优化自身的算法和功能，提供更加个性化的服务
创作者训练营系列
「获取元素宽高getComputedStyle、getBoundingClientRect、getClientRects」
