Cara terpendek untuk mencetak tahun ini di situs web

232

Saya perlu memperbarui beberapa ratus halaman HTML statis yang memiliki tanggal kode keras di kode kaki. Saya ingin menggantinya dengan beberapa JavaScript yang akan diperbarui secara otomatis setiap tahun.

Saat ini saya menggunakan:

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

Apakah ini sependek yang didapat?

tpow
sumber

Jawaban:

542

Inilah yang terpendek yang bisa saya dapatkan:

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

Itu akan bekerja di semua browser yang saya temui.

Bagaimana saya sampai di sana:

  • Anda bisa getFullYearlangsung menelepon pada yang baru dibuat Date, tidak perlu untuk variabel. new Date().getFullYear()mungkin terlihat agak aneh, tetapi dapat diandalkan: new Date()bagian ini dilakukan terlebih dahulu, kemudian.getFullYear() .
  • Anda dapat menghapusnya type, karena JavaScript adalah default; ini bahkan didokumentasikan sebagai bagian dari spesifikasi HTML5 , yang kemungkinan dalam hal ini akan menulis apa yang sudah dilakukan browser.
  • Anda dapat menjatuhkan titik koma di bagian akhir untuk satu karakter tambahan yang disimpan, karena JavaScript memiliki "penyisipan titik koma otomatis," sebuah fitur yang biasanya saya benci dan ganggu, tetapi dalam kasus penggunaan khusus ini harus cukup aman.

Penting untuk dicatat bahwa ini hanya berfungsi pada browser tempat JavaScript diaktifkan. Idealnya, ini akan lebih baik ditangani sebagai pekerjaan batch offline ( sedskrip pada * nix, dll) setahun sekali, tetapi jika Anda menginginkan solusi JavaScript, saya pikir itu sesingkat yang didapat. (Sekarang saya sudah pergi dan menggoda nasib.)

TJ Crowder
sumber
1
pada tahun 2019 menulis ulang semua konten halaman. apakah saya melewatkan sesuatu?
Sistem Rebooter
2
@SystemsRebooter - Anda hanya dapat menggunakan document.writekonten inline selama fase parsing awal (seperti yang ditunjukkan di atas, dalam <script>...</script>tag - atau dalam .jsfile yang dimuat dengan scripttag tanpa defer atau async). Ketika halaman sepenuhnya diuraikan, aliran dokumen ditutup, dan menggunakan document.writebuka kembali - sepenuhnya mengganti dokumen dengan yang baru. Jika Anda ingin menambahkan satu tahun setelah penguraian utama selesai, Anda ingin menggunakan DOM. (Ini bukan perubahan, selalu seperti ini.)
TJ Crowder
44

Jawaban TJ sangat baik tetapi saya mengalami satu skenario di mana HTML saya sudah diterjemahkan dan script document.write akan menimpa semua konten halaman hanya dengan tahun tanggal.

Untuk skenario ini, Anda bisa menambahkan simpul teks ke elemen yang ada menggunakan kode berikut:

<div>
    &copy;
    <span id="copyright">
        <script>document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))</script>
    </span>
    Company Name
</div>
Adam Milecki
sumber
Ya - solusi yang bagus! Saya sarankan untuk memindahkan snipet skrip tepat sebelum tag body penutup atau ke js lainnya di akhir tubuh html.
Christian Michael
createTextNode()tidak mengartikan html seperti <br>bagaimana Anda membuat simpul dengan HTML?
rubo77
19

Jika Anda ingin memasukkan kerangka waktu di masa depan, dengan tahun berjalan (mis. 2017) sebagai tahun awal sehingga tahun depan akan muncul seperti ini: "© 2017-2018, Company.", Kemudian gunakan kode berikut . Secara otomatis akan diperbarui setiap tahun:

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

© Hak Cipta 2017-2018, Perusahaan.

Tetapi jika tahun pertama telah berlalu, kode terpendek dapat ditulis seperti ini:

&copy; Copyright 2010-<script>document.write(new Date().getFullYear())</script>, Company.
Martin Adams
sumber
13
<script type="text/javascript">document.write(new Date().getFullYear());</script>
Thomas Kremmel
sumber
1
Saya tahu hanya <script> lebih pendek (lihat jawaban lain), tetapi miliknya lebih terkini dan akan selalu berfungsi. Bahkan, saya punya contoh di WP di mana yang lain tidak akan berfungsi, tapi yang ini tidak masalah. Tidak yakin mengapa WP akan melempar masalah ini ... Saya tahu saat ini Anda dapat menghapus; di akhir dan script default untuk js, tapi tetap saja.
Maleakhi
9

Solusi JS berfungsi dengan baik tetapi saya akan menyarankan solusi sisi server. Beberapa situs yang saya periksa memiliki masalah bahwa seluruh halaman menjadi kosong dan hanya setahun yang terlihat sesekali.

Alasan untuk ini adalah dokumen. Menulis sebenarnya menulis seluruh dokumen.

Saya meminta teman saya untuk mengimplementasikan solusi sisi server dan itu berhasil baginya. Kode sederhana dalam php

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

Nikmati!

Arcanyx
sumber
1
Solusi Anda sangat sederhana, Tapi masalahnya adalah bahwa pertanyaan terkait dengan JavaScript
Mo.
2
Ha ha! Solusi sudah diberikan ketika saya memposting ini. Masih saya ingin orang tahu ada cara lain juga! Semoga ini membantu orang seperti saya di masa depan!
Arcanyx
Saya setuju dengan Anda bahwa kami perlu mencari alternatif ketika tidak ada solusi dengan pemikiran yang sama. Berhati-hatilah dengan suara turun 😉
Mo.
Dan bagaimana jika solusi sisi server adalah Node.js dan karenanya JavaScript?
rorymorris89
2
Jika halaman menjadi kosong, ini berarti yang document.writedigunakan setelah DOM sudah dimuat. Solusinya adalah tidak menggunakan document.writesetelah semua beban DOM, atau, lebih baik lagi, tidak menggunakan document.writesama sekali.
user4642212
8

Inilah versi terpendek yang paling bertanggung jawab yang bahkan berfungsi sebagai AD dan BC.

[drum rolls ...]

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

Itu dia. 6 Bytes lebih pendek dari jawaban yang diterima.

Jika Anda harus kompatibel dengan ES5, Anda dapat menerima:

<script>document.write(Date().split(' ')[3])</script>
Christiaan Westerbeek
sumber
4
Bagaimana jika pengguna Anda kembali ke masa sebelum 1000 M? Atau bagaimana jika pengguna menggunakan aplikasi Anda> 9999 AD? #responsibleCode # NotAnotherY2K;)
Nick Steele
3
@NickSteele Semoga kita tidak menulis javascript murni pada saat itu.
Michael McQuade
1

Ini adalah solusi terbaik yang dapat saya pikirkan yang akan bekerja dengan JavaScript murni. Anda juga bisa mendesain elemen karena dapat ditargetkan dalam CSS. Tambahkan saja tahun ini dan itu akan secara otomatis diperbarui.

//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
sumber
1

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

Jonathan Akwetey Okine
sumber
1

Untuk React.js, berikut ini adalah yang bekerja untuk saya di catatan kaki ...

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