在网站上打印当前年份的最短方法

我需要更新几百个静态HTML页面，版权日期硬编码在页脚。我想用一些每年都会自动更新的JavaScript来替换它。

目前我正在使用:

<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>

就这么短了吗?

351845 次浏览
小开
最佳答案

多年以后，当我做其他事情时，我被提醒Date()(没有new)返回一个字符串，并且有一种方式是一个字符比我原来的更短:

<script>document.write(/\d{4}/.exec(Date())[0])</script>

从Date()开始的字符串的第一个四位数序列是指定为年份。(当我最初的答案发布在下面时，这并不是特定的行为——尽管这很常见。)

当然，这个解只能再有效7979年(截至2021年撰写本文时)，因为在10000年它将显示“;1000;”;而不是“10000”。

你已经要求一个JavaScript解决方案，所以这里是我可以得到它的最短:

<script>document.write(new Date().getFullYear())</script>

这在我使用过的所有浏览器中都适用。

我是怎么做到的:

  • 你可以直接在新创建的Date上调用getFullYear，不需要变量。new Date().getFullYear()可能看起来有点奇怪，但它是可靠的:new Date()部分先完成，然后是.getFullYear()。
  • 你可以去掉type，因为JavaScript是默认的;这甚至被记录为HTML5规范的一部分，在这种情况下，它可能会记录浏览器已经做的事情。
  • 为了多保存一个字符，您可以省去末尾的分号，因为JavaScript有“自动分号插入”，“;一个功能，我通常鄙视和铁路反对，但在这个特定的用例中，它应该是足够安全的。

需要注意的是，这只适用于启用JavaScript的浏览器。理想情况下，这最好是作为每年一次的离线批处理作业(*nix上的sed脚本等)来处理，但如果你想要JavaScript解决方案，我认为这是最简短的。(现在我已经去挑战命运了。)

然而，除非你使用的服务器可以只有提供静态文件，否则你最好在服务器上使用模板引擎，并使用缓存头文件来允许结果页面被缓存，直到日期需要更改。这样，客户机上就不需要JavaScript了。在内容中使用非-defer/async script标记还会短暂地延迟页面的解析和表示(正是因为这个原因:因为脚本中的代码可能会使用document.write来输出HTML)。

小开 
<script type="text/javascript">document.write(new Date().getFullYear());</script>
小开

如果你想在未来包含一个时间框架，以当前年份(例如2017年)作为开始年份，这样明年就会像这样显示:“©2017-2018，公司。，然后使用下面的代码。它每年都会自动更新:

&copy; Copyright 2017<script>new Date().getFullYear()>2017&&document.write("-"+new Date().getFullYear());</script>, Company.

©版权所有2017-2018，公司。

但如果第一年已经过去了，最短的代码可以写成这样:

&copy; Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.
小开

JS解决方案很好，但我建议使用服务器端解决方案。我检查过的一些网站有这样的问题，整个页面都是空白的，只在一段时间内看到年份。

这样做的原因是document . write实际上重写了整个文档。

我让我的朋友实现一个服务器端解决方案，它为他工作。 php

中的简单代码 
<?php echo date('Y'); ?>

享受吧!

小开

TJ的回答很好，但我遇到了一个场景，我的HTML已经呈现，文档。写脚本将覆盖所有的页面内容，只有日期年。

对于这种情况，您可以使用以下代码将一个文本节点附加到现有元素:

<div>
&copy;
<span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>
Company Name
</div>
小开

这里有一个最短最负责任的版本，甚至适用于AD和BC。

(滚筒滚……)

<script>document.write(Date().split` `[3])</script>

就是这样。比接受的答案短6字节。

如果你需要兼容ES5，你可以满足:

<script>document.write(Date().split(' ')[3])</script>
小开

这是我能想到的使用纯JavaScript的最佳解决方案。您还可以在CSS中为元素设置目标样式。只要把年份加进去，它就会自动更新。

//Wait for everything to load first
window.addEventListener('load', () => {
//Wrap code in IIFE
(function() {
//If your page has an element with ID of auto-year-update the element will be populated with the current year.
var date = new Date();
if (document.querySelector("#auto-year-update") !== null) {
document.querySelector("#auto-year-update").innerText = date.getFullYear();
}
})();
});
小开 

<div>&copy;<script>document.write(new Date().getFullYear());</script>, Company.
</div>

小开

对于React.js，下面是我在页脚工作的方法…

render() {
const yearNow = new Date().getFullYear();
return (
<div className="copyright">&copy; Company 2015-{yearNow}</div>
);
}
小开

根据chrome审核

对于连接慢的用户，动态注入外部脚本 通过document.write()可以延迟页面加载数十秒

https://web.dev/no-document-write/?utm_source=lighthouse&utm_medium=devtools

所以没有误差的解是:

(new Date).getFullYear();
小开

上述专家提供了很多解决这个问题的方法。下面的解决方案可以使用，它将not block页面rendering或not even re-trigger它。

在纯Javascript中:

window.addEventListener('load', (
function () {
document.getElementById('copyright-year').appendChild(
document.createTextNode(
new Date().getFullYear()
)
);
}
));
<div> &copy; <span id="copyright-year"></span></div>

In jQuery:

$(document).ready(function() {
document.getElementById('copyright-year').appendChild(
document.createTextNode(
new Date().getFullYear()
)
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> &copy; <span id="copyright-year"></span></div>

小开

公认的答案并不总是有效的

最近的一次更新导致我所有的WordPress页脚版权日期都被下推到页面末尾，而不是像以前那样内联写。我相信在其他情况下也会发生这种情况，但这只是我注意到的地方。

enter image description here

如果发生这种情况，你可以通过创建一个空span标签来修复它，并像这样注入你的日期:

<span id="cdate"></span><script>document.getElementById("cdate").innerHTML = (new Date().getFullYear());</script>

或者如果你在你的网站上启用了jquery，你可以像这样简单一点:

<span id="cdate"></span><script>$("#cdate").html(new Date().getFullYear());</script>

这与Adam Milecki的答案相似，但要简短得多

小开

使用document.write不是一个好的实践。你可以了解更多关于文档的信息。通过按在这里写入。下面是一个比较友好的JavaScript解决方案。是的，有关于InnerHTML有多糟糕的研究，正在研究一个更友好的解决方案。

document.getElementById("year").innerHTML = (new Date().getFullYear());

↑JavaScript

↓HTML

<p>Company &copy; <span id="year"></span> All Rights Reserved.</p>

这里有一个JSFiddle来测试它。比起JavaScript，我个人更推荐用PHP写今年的，用PHP比JavaScript安全得多。

<?php echo date("Y"); ?>
小开

如果你在你的网站上多次需要当前年份，你可以这样做:

document.querySelectorAll("copy-year").forEach(el => {
el.textContent = `${el.textContent} - ${new Date().getFullYear()}`;
});
Copyright Company <copy-year>1234</copy-year> ©

I know, it is not the shortest way, but it works really good.

PS: You need to have JS on bottom of your page or use defer attribute on script tag.

小开

满一年:

document.getElementById("getyear").innerHTML = (new Date().getFullYear());
<span id="getyear"></span>

小开
React.js < p >, 我们可以在单行中使用-

    return
<div className="copyright">Company 2015-{new Date().getFullYear()}</div>
小开

非常简单!

<p>&copy;
<script type="text/javascript">
document.write(new Date().getFullYear());
</script>
</p>

小开

在网站上打印当前年份的最短方法

只需使用这段代码

<?php echo date('Y'); ?>
小开

这个答案类似于雷的答案，但使用模板文字和文本回退

<p>&copy;
<span id="copyright-year">2021</span>
Company Name
</p>


<script>
document.getElementById("copyright-year").innerHTML = `${new Date().getFullYear()}`;
</script>

©2022公司名称

document.getElementById("copyright-year").innerText = `${new Date().getFullYear()}`;

同样适用。


提交答案