我的网站一直有一个小问题：更新时间并不会自动更新。
就这块：
改之前，最新的时间还是2021年。
因为我比较懒，一直没去更新这个。我其实知道有2种办法：
第一种，手动去把 2021，改成 2024，往后每年手动更新一次；
第二种，用代码，让它每年自动更新。
我心里更倾向于第二种办法，早些时间也看过一些这方面的代码。
那今天给一个朋友分析他们的网站效果，顺道把自己网站更新下。
这次实在看不下去了，索性把它解决拉倒了。
简单讲下我的思路：直接借助chatgpt。
第一回合：“网站页脚时间自动更新代码”
chatgpt给的回复是：
<html><head><title>自动更新时间</title><script>function updateTime() {var now = new Date();var time = now.toLocaleTimeString(); // 获取当前时间的字符串表示// 将时间更新到页面上的元素document.getElementById('time').innerHTML = time;// 每秒钟调用一次 updateTime 函数setTimeout(updateTime, 1000);}</script></head><body onload="updateTime()"><footer>当前时间：<span id="time"></span></footer></body></html>
然后也给了简单的说明：
这段代码会在页面加载完成时调用 onload 事件处理程序，然后开始更新时间。updateTime 函数会获取当前时间，然后将其更新到页面上具有 id 为 "time" 的元素中。然后，使用 setTimeout 函数设置一个定时器，每秒钟调用一次 updateTime 函数，以实现时间的自动更新。将上述代码保存为一个 HTML 文件并在浏览器中打开，你将看到页脚中的时间会自动更新。
老实讲，我也不咋地看得懂。
但是“每秒钟”这3个字有点刺眼，我担心它调用的资源太多，浪费服务器资源，还影响用户体验（加载速度慢）。
当然，其实还有个比较大的问题：我问的问题并不好。
所以，想要用好 chatgpt，会提问很重要。
第二回合：“把下面这段话改成代码形式，要求它的年份会实时更新：© 2016-2024. ABC Co., Ltd. All rights reserved.”
这回的代码是：
<html><head><title>实时更新年份</title><script>function updateYear() {var currentYear = new Date().getFullYear(); // 获取当前年份var copyright = document.getElementById('copyright');// 更新年份copyright.innerHTML = "© 2016-" + currentYear + ". ABC Co., Ltd. All rights reserved.";// 每秒钟调用一次 updateYear 函数setTimeout(updateYear, 1000);}</script></head><body onload="updateYear()"><footer><span id="copyright">© 2016-<script>document.write(new Date().getFullYear());</script>. ABC Co., Ltd. All rights reserved.</span></footer></body></html>
调用函数那些我就省略掉了，反正我也看不懂。
这回作为甲方爸爸的我，开始提我上面提到的那2个担心的点了：
第三回合：“不用每秒钟调用吧，每年调用一下就好了"。
<html><head><title>每年更新年份</title><script>function updateYear() {var currentYear = new Date().getFullYear(); // 获取当前年份var copyright = document.getElementById('copyright');// 更新年份copyright.innerHTML = "© 2016-" + currentYear + ". ABC Co., Ltd. All rights reserved.";}// 在页面加载完成时调用 updateYear 函数window.onload = updateYear;</script></head><body><footer><span id="copyright">© 2016-<script>document.write(new Date().getFullYear());</script>. ABC Co., Ltd. All rights reserved.</span></footer></body></html>
在这个代码中，我们使用了 window.onload 事件来在页面加载完成时调用 updateYear 函数，以更新年份。这样，年份只会在页面加载时更新一次，而不会每秒钟更新。将上述代码保存为一个 HTML 文件并在浏览器中打开，你将看到年份会在页面加载时更新为当前年份，然后保持不变。
感觉更改过来了。继续提要求：
第四回合：“这段代码不占用很多服务器资源吧，要求这段代码不能影响网站的加载速度”。
这段代码不会占用很多服务器资源，因为它只是在客户端（浏览器）上执行，并且只在页面加载完成时调用一次。代码本身的执行是在客户端进行的，不需要服务器的实时计算或响应。它只是在打开页面时获取当前年份，并将其更新到页面上的特定元素中。
这段代码不会对网站的加载速度产生显著影响，因为它只是在加载完成后立即执行一次，并且执行的操作非常简单。它不会引入任何额外的网络请求或复杂的计算任务。因此，你可以放心使用这段代码，它不会对网站的性能或加载速度产生负面影响。
那我就放心了，但是总感觉是不是可以再精简下代码？
第五回合：“还能再精简下吗“
安排！
<html><head><title>每年更新年份</title><script>document.addEventListener('DOMContentLoaded', function() {var currentYear = new Date().getFullYear(); // 获取当前年份var copyright = document.getElementById('copyright');// 更新年份copyright.textContent = "© 2016-" + currentYear + ". ABC Co., Ltd. All rights reserved.";});</script></head><body><footer><span id="copyright">© 2016-<script>document.write(new Date().getFullYear());</script>. ABC Co., Ltd. All rights reserved.</span></footer></body></html>
在这个精简的代码中，我们使用了 document.addEventListener('DOMContentLoaded', ...) 来在 DOM 加载完成时执行回调函数。在回调函数中，我们获取当前年份并将其更新到页面上的元素中。这样，代码更加简洁，仍然能够在网站加载完成后更新年份。它不会对网站的加载速度产生显著影响，并且能够实现每年更新一次年份的要求。
看样子，没啥问题了。
嗯，这次是真的懂了，毕竟没亲自做到过的事情，都不能算真的懂。
知行合一，说起来容易，做起来其实很难。
就从解决一个又一个小问题开始吧。
BTW，再一次感慨下，很多公司的网站，做得真的非常的烂。
不过也是好事，说明我们还有大把的机会😄
