Najkrótszy sposób na wydrukowanie bieżącego roku na stronie internetowej

232

Muszę zaktualizować kilkaset statycznych stron HTML, których data praw autorskich jest zapisana w stopce. Chcę zastąpić go JavaScriptem, który będzie aktualizowany co roku.

Obecnie używam:

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

Czy to jest tak krótkie, jak to możliwe?

tpow
źródło

Odpowiedzi:

542

Oto najkrótsza możliwa do uzyskania:

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

To zadziała we wszystkich przeglądarkach, z którymi się zetknąłem.

Jak się tam dostałem:

  • Możesz po prostu zadzwonić getFullYearbezpośrednio do nowo utworzonego Date, bez potrzeby wprowadzania zmiennej. new Date().getFullYear()może wyglądać nieco dziwnie, ale jest wiarygodny: new Date()część jest wykonywana najpierw, a następnie .getFullYear().
  • Możesz upuścić type, ponieważ JavaScript jest domyślny; jest to nawet udokumentowane jako część specyfikacji HTML5 , która prawdopodobnie w tym przypadku zapisuje to, co przeglądarki już robią.
  • Możesz upuścić średnik na końcu dla jednego dodatkowego zapisanego znaku, ponieważ JavaScript ma „automatyczne wstawianie średnika”, cechę, której zwykle nie znoszę i której się przeciwstawiam, ale w tym konkretnym przypadku powinien być wystarczająco bezpieczny.

Należy pamiętać, że działa to tylko w przeglądarkach z włączoną obsługą JavaScript. Najlepiej byłoby, gdyby sedraz w roku lepiej było to traktować jako zadanie wsadowe offline ( skrypt na * nix itp.), Ale jeśli potrzebujesz rozwiązania JavaScript, myślę, że jest tak krótki, jak to możliwe. (Teraz odszedłem i kusiłem los.)

TJ Crowder
źródło
1
w 2019 r. przepisuje całą zawartość strony. czy coś mi brakuje?
Ponowne uruchomienie systemów
2
@SystemsRebooter - Możesz używać tylko document.writedla treści wstawianych podczas początkowej fazy analizy (jak pokazano powyżej, w <script>...</script>znaczniku - lub w .jspliku załadowanym scriptznacznikiem bez defer lub async). Kiedy strona jest w pełni parsowana, strumień dokumentów jest zamykany, a użycie document.writego ponownie otwiera - całkowicie zastępując dokument nowym. Jeśli chcesz dodać rok po zakończeniu głównej analizy, chcesz użyć DOM. (To nie jest zmiana, zawsze tak było.)
TJ Crowder
44

Odpowiedź TJ jest doskonała, ale wpadłem na jeden scenariusz, w którym mój kod HTML został już zrenderowany, a skrypt document.write zastąpiłby całą zawartość strony tylko datą roku.

W tym scenariuszu możesz dołączyć węzeł tekstowy do istniejącego elementu, używając następującego kodu:

<div>
    &copy;
    <span id="copyright">
        <script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
    </span>
    Company Name
</div>
Adam Milecki
źródło
Tak - dobre rozwiązanie! Zalecam przeniesienie fragmentu skryptu bezpośrednio przed zamykającym znacznikiem body lub do innych plików js na końcu treści HTML.
Christian Michael
createTextNode()nie interpretuje html jak na przykład <br>jak utworzyć węzeł za pomocą HTML?
rubo77
19

Jeśli chcesz uwzględnić ramy czasowe w przyszłości, z bieżącym rokiem (np. 2017) jako rokiem początkowym, aby w przyszłym roku wyglądało to tak: „© 2017-2018, Company.”, Użyj następującego kodu . Będzie się automatycznie aktualizować co roku:

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

© Copyright 2017-2018, Firma.

Ale jeśli minął już pierwszy rok, najkrótszy kod można zapisać w następujący sposób:

&copy; Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.
Martin Adams
źródło
13
<script type="text/javascript">document.write(new Date().getFullYear());</script>
Thomas Kremmel
źródło
1
Wiem, że <skrypt> jest krótszy (patrz inna odpowiedź), ale jego jest bardziej aktualny i zawsze będzie działać. W rzeczywistości miałem instancję w WP, w której druga nie działała, ale ta nie była problemem. Nie jestem pewien, dlaczego WP rzuciłoby na to problem ... Wiem, że w dzisiejszych czasach możesz porzucić; na końcu i domyślnie skrypt to js, ​​ale nadal.
Malachi
9

Rozwiązanie JS działa świetnie, ale doradziłbym rozwiązanie po stronie serwera. W niektórych witrynach, które sprawdziłem, problem z całą stroną był pusty, a od czasu do czasu pojawiał się tylko rok.

Powodem tego był document.write, który faktycznie napisał cały dokument.

Poprosiłem mojego przyjaciela o wdrożenie rozwiązania po stronie serwera i to zadziałało dla niego. Prosty kod w php

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

Cieszyć się!

Arcanyx
źródło
1
Twoje rozwiązanie jest takie proste, ale chodzi o to, że pytanie dotyczy JavaScript
pon.
2
Ha ha! Rozwiązanie zostało już podane, kiedy to opublikowałem. Nadal chciałem, żeby ludzie wiedzieli, że są też inne sposoby! Mam nadzieję, że pomoże to w przyszłości osobom takim jak ja!
Arcanyx,
Zgadzam się z tobą, że musimy szukać alternatywy, gdy nie ma rozwiązania o tym samym myśleniu. Należy zwracać uwagę na głosowanie w dół 😉
Mo.
A jeśli rozwiązanie po stronie serwera to Node.js, a zatem JavaScript?
rorymorris89
2
Jeśli strona stanie się pusta, oznacza to, że document.writezostała użyta po załadowaniu DOM. Rozwiązaniem jest nieużywanie document.writepo wszystkich ładowaniach DOM, a nawet, w ogóle, nieużywanie document.write.
user4642212,
8

Oto najkrótsza, najbardziej odpowiedzialna wersja, która działa nawet w trybie AD i BC.

[rolki bębna ...]

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

Otóż ​​to. 6 bajtów krótszych niż zaakceptowana odpowiedź.

Jeśli potrzebujesz zgodności z ES5, możesz zadowolić się:

<script>document.write(Date().split(' ')[3])</script>
Christiaan Westerbeek
źródło
4
Co jeśli Twój użytkownik cofnie się w czasie przed 1000 AD? A co, jeśli użytkownik korzysta z Twojej aplikacji> 9999 AD? #responsibleCode # NotAnotherY2K;)
Nick Steele
3
@NickSteele Mam nadzieję, że w tym momencie nie piszemy czystego javascript.
Michael McQuade
1

To najlepsze rozwiązanie, jakie mogę wymyślić, będzie działać z czystym JavaScript. Będziesz także mógł stylizować element, ponieważ może być celem CSS. Wystarczy dodać w miejsce roku, a zostanie on automatycznie zaktualizowany.

//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();
        }
    })();
});
Chris
źródło
1

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

Jonathan Akwetey Okine
źródło
1

W przypadku React.js w stopce zadziałało:

render() {
    const yearNow = new Date().getFullYear();
    return (
    <div className="copyright">&copy; Company 2015-{yearNow}</div>
);
}
Kris Stern
źródło
0

według audytu chrome

Dla użytkowników korzystających z wolnych połączeń skrypty zewnętrzne wprowadzane dynamicznie za pośrednictwem document.write()mogą opóźnić ładowanie strony o kilkadziesiąt sekund.

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

więc rozwiązaniem bez błędów jest:

(new Date).getFullYear();
Karol
źródło