我需要更新几百个静态HTML页面,版权日期硬编码在页脚。我想用一些每年都会自动更新的JavaScript来替换它。
目前我正在使用:
<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>
就这么短了吗?
我需要更新几百个静态HTML页面,版权日期硬编码在页脚。我想用一些每年都会自动更新的JavaScript来替换它。
目前我正在使用:
<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>
就这么短了吗?
几年后,当我做其他事情时,我被提醒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>
这在我使用过的所有浏览器中都适用。
我是怎么做到的:
You can just call getFullYear directly on the newly-created Date, no need for a variable. new Date().getFullYear() may look a bit odd, but it's reliable: the new Date() part is done first, then the .getFullYear(). You can drop the type, because JavaScript is the default; this is even documented as part of the HTML5 specification, which is likely in this case to be writing up what browsers already do. You can drop the semicolon at the end for one extra saved character, because JavaScript has "automatic semicolon insertion," a feature I normally despise and rail against, but in this specific use case it should be safe enough.
需要注意的是,这只适用于启用JavaScript的浏览器。理想情况下,这最好是作为每年一次的离线批处理作业(*nix上的sed脚本等)来处理,但如果您想要JavaScript解决方案,我认为这是最简单的解决方案。(现在我已经去挑战命运了。)
However, unless you're using a server that can only provide static files, you're probably better off doing this on the server with a templating engine and using caching headers to allow the resulting page to be cached until the date needs to change. That way, you don't require JavaScript on the client. Using a non-defer/async script tag in the content also briefly delays the parsing and presentation of the page (for exactly this reason: because the code in the script might use document.write to output HTML).
<script type="text/javascript">document.write(new Date().getFullYear());</script>
如果你想在未来包含一个时间框架,以当前年份(例如2017年)作为开始年份,这样明年就会像这样显示:“©2017-2018,公司。,然后使用下面的代码。它每年都会自动更新:
© Copyright 2017<script>new Date().getFullYear()>2017&&document.write("-"+new Date().getFullYear());</script>, Company.
©版权所有2017-2018,公司。
但如果第一年已经过去了,最短的代码可以写成这样:
© Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.
JS解决方案很好,但我建议使用服务器端解决方案。我检查过的一些网站有这样的问题,整个页面都是空白的,只在一段时间内看到年份。
这样做的原因是文件。写实际上写满了整个文档。
我让我的朋友实现了一个服务器端解决方案,这对他来说是有效的。 php中的简单代码
<?php echo date('Y'); ?>
享受吧!
TJ的回答很好,但我遇到了一个场景,我的HTML已经呈现,文档。写脚本将覆盖所有的页面内容,只有日期年。
对于这种情况,您可以使用以下代码将一个文本节点附加到现有元素:
<div>
©
<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 >是<脚本文件。</script>, Company. write(new Date(). getfullyear ()); < / div >
对于React.js,下面是我在页脚工作的方法…
render() {
const yearNow = new Date().getFullYear();
return (
<div className="copyright">© Company 2015-{yearNow}</div>
);
}
根据chrome审核
对于连接速度慢的用户,动态注入外部脚本 通过document.write()可以延迟页面加载数十秒。 https://web.dev/no-document-write/?utm_source=lighthouse&utm_medium=devtools
所以没有误差的解是:
(new Date).getFullYear();
上述专家提供了很多解决这个问题的方法。下面的解决方案可以使用,这将不会阻塞页面渲染,甚至不会重新触发它。
在纯Javascript中:
窗口。addEventListener(“负载”,( 函数(){ . getelementbyid(“copyright-year”).appendChild ( document.createTextNode ( 新日期().getFullYear () ) ); } )); < div >软件是< span id = " copyright-year " > < / span > < / div >
jQuery:
$(文档)时函数(){ . getelementbyid(“copyright-year”).appendChild ( document.createTextNode ( 新日期().getFullYear () ) ); }); < script src = " https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js " > < /脚本> < div >软件是< span id = " copyright-year " > < / span > < / div >
公认的答案并不总是有效的
最近的一次更新导致我所有的WordPress页脚版权日期都被下推到页面末尾,而不是像以前那样内联写。我相信在其他情况下也会发生这种情况,但这只是我注意到的地方。
如果发生这种情况,你可以通过创建一个空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
↓ 网页
<p>Company © <span id="year"></span> All Rights Reserved.</p>
这里有一个JSFiddle来测试它。比起JavaScript,我个人更推荐用PHP写今年的,用PHP比JavaScript安全得多。
<?php echo date("Y"); ?>
如果你在你的网站上多次需要当前年份,你可以这样做:
document.querySelectorAll(“copy-year”)。forEach(el => { 埃尔。textContent = ' ${el。textContent} - ${new Date().getFullYear()} '; }); 版权所有公司<copy-year>1234</copy-year>©
我知道,这不是最短的方法,但它真的很有效。
PS:你需要有JS在你的页面底部或使用延迟属性的脚本标签。
满一年:
document.getElementById(“getyear”).innerHTML = (new Date().getFullYear()); <span id=“getyear”></span>
React.js, 我们可以在单行中使用-
return
<div className="copyright">Company 2015-{new Date().getFullYear()}</div>
Easy-peasy !
< p >软件是 < script type = " text / javascript " > 文档。写(新的日期().getFullYear ()); > < /脚本 < / p >
这个答案与Ray的答案相似,但使用了模板文字和文本回退
<p>©
<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()}`;
同样适用。