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?

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.)


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>

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.

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

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ę!


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>

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();
        }
    })();
});


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>
);
}

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.