Preciso atualizar algumas centenas de páginas HTML estáticas que têm a data de direitos autorais codificada no rodapé. Quero substituí-lo por algum JavaScript que será atualizado automaticamente a cada ano.
Atualmente estou usando:
<script type="text/javascript">var year = new Date();document.write(year.getFullYear());</script>Isso é o mais curto possível?
Respostas:
Aqui está o mais curto possível:
<script>document.write(new Date().getFullYear())</script>Isso funcionará em todos os navegadores que encontrei.
Como cheguei lá:
getFullYeardiretamente o recém-criado Date, sem necessidade de uma variável. new Date().getFullYear()pode parecer um pouco estranho, mas é confiável: a new Date()peça é feita primeiro e depois a .getFullYear().type, porque JavaScript é o padrão; isso é documentado como parte da especificação HTML5 , que provavelmente neste caso está escrevendo o que os navegadores já fazem.É importante observar que isso funciona apenas em navegadores onde o JavaScript está ativado. Idealmente, isso seria melhor tratado como um trabalho em lote offline ( sedscript em * nix, etc.) uma vez por ano, mas se você quiser a solução JavaScript, acho que é o mais curto possível. (Agora eu fui e tentei o destino.)
document.writepara conteúdo embutido durante a fase de análise inicial (como mostrado acima, em uma <script>...</script>tag - ou em um .jsarquivo carregado com uma scripttag sem defer ou async). Quando a página é totalmente analisada, o fluxo de documentos é fechado e o uso é document.writereaberto - substituindo completamente o documento por um novo. Se você deseja adicionar um ano após a conclusão da análise principal, use o DOM. (Isto não é uma mudança, que sempre foi assim.)
A resposta de TJ é excelente, mas encontrei um cenário em que meu HTML já estava renderizado e o script document.write sobrescreveria todo o conteúdo da página apenas com a data do ano.
Nesse cenário, você pode anexar um nó de texto ao elemento existente usando o seguinte código:
<div>
©
<span id="copyright">
<script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
</span>
Company Name
</div>createTextNode()não interpreta html como <br>como criar um nó com HTML?
Se você deseja incluir um período no futuro, com o ano atual (por exemplo, 2017) como o ano inicial, para que no próximo ano apareça assim: “© 2017-2018, Company.”, Use o código a seguir . Ele será atualizado automaticamente a cada ano:
© Copyright 2017<script>new Date().getFullYear()>2017&&document.write("-"+new Date().getFullYear());</script>, Company.© Copyright 2017-2018, Empresa.
Mas se o primeiro ano já passou, o código mais curto pode ser escrito assim:
© Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.<script type="text/javascript">document.write(new Date().getFullYear());</script>A solução JS funciona muito bem, mas eu recomendaria uma solução do lado do servidor. Alguns dos sites que eu verifiquei tiveram esse problema da página inteira ficando em branco e apenas o ano sendo visto de vez em quando.
A razão para isso foi a document.write realmente escreveu sobre o documento inteiro.
Pedi ao meu amigo para implementar uma solução no servidor e funcionou para ele. O código simples em php
<?php echo date('Y'); ?>Aproveitar!
document.writefoi usado após o DOM já estar carregado. A solução é não usar document.writedepois que todo o DOM for carregado ou, melhor ainda, não usar document.write.
Aqui está a versão mais curta e mais responsável que funciona até no AD e no BC.
[tambor rola ...]
<script>document.write(Date().split` `[3])</script>É isso aí. 6 bytes mais curtos que a resposta aceita.
Se você precisar ser compatível com ES5, poderá optar por:
<script>document.write(Date().split(' ')[3])</script>Esta é a melhor solução que posso pensar que funcionará com JavaScript puro. Você também poderá estilizar o elemento, pois ele pode ser direcionado em CSS. Basta adicionar no lugar do ano e ele será atualizado automaticamente.
//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>document.write(new Date().getFullYear());</script>, Company.
</div>Para o React.js, o seguinte funcionou para mim no rodapé ...
render() {
const yearNow = new Date().getFullYear();
return (
<div className="copyright">© Company 2015-{yearNow}</div>
);
}de acordo com a auditoria do chrome
Para usuários em conexões lentas, scripts externos injetados dinamicamente via
document.write()podem atrasar o carregamento da página em dezenas de segundos.https://web.dev/no-document-write/?utm_source=lighthouse&utm_medium=devtools
então a solução sem erros é:
(new Date).getFullYear();