Tambah javascript butang tutup

Bagaimana untuk menambah butang tutup pada halaman web? Ini mungkin keperluan yang sering diabaikan, tetapi pada hakikatnya, pada halaman web yang mengandungi banyak maklumat, pengguna mungkin perlu menutupnya selepas menyemak imbas untuk seketika. Terutama pada peranti mudah alih, di mana pengguna enggan menatal kerana skrin yang lebih kecil, mereka lebih cenderung memilih untuk menutup halaman daripada menghabiskan masa tambahan membaca kandungan. Sesetengah pereka web percaya bahawa menambah butang tutup di penjuru kiri sebelah atas halaman akan membantu memberikan pengalaman pengguna yang lebih baik. Oleh itu, dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk menambah butang tutup yang mudah.

1 Buat elemen butang tutup

Dalam langkah pertama, kita perlu mencipta elemen butang tutup. Dalam HTML, kita boleh menggunakan elemen butang untuk mencipta butang dan memberikannya atribut id. Dalam CSS, kita boleh menentukan gaya butang, seperti menetapkan kedudukan butang, saiz dan warna. Kodnya adalah seperti berikut:

HTML

<button id="close-button">关闭</button>

CSS

#close-button {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #f00;
  color: #fff;
  cursor: pointer;
}

2. Tambah kod JavaScript

Seterusnya, kita perlu menambah kod JavaScript. Mula-mula kita perlu mendapatkan elemen butang tutup dan kemudian menambah pendengar acara kepadanya. Apabila pengguna mengklik butang, pendengar acara ini menyala dan melaksanakan fungsi yang menutup halaman semasa. Kodnya adalah seperti berikut:

JavaScript

var closeButton = document.getElementById('close-button');
closeButton.addEventListener('click', function() {
  window.close();
});

Dalam contoh ini, kami menggunakan kaedah close() objek tetingkap dalam JavaScript untuk menutup halaman semasa.

3. Uji dan laraskan gaya

Kini kita boleh membuka halaman web dan melihat sama ada butang tutup berfungsi dengan betul. Jika selepas mengklik butang, halaman web ditutup dan kembali ke halaman utama penyemak imbas atau membuka halaman baharu, ini bermakna butang tutup telah berjaya ditetapkan.

Akhir sekali, kami boleh membuat pelarasan yang sesuai pada gaya butang tutup, seperti menukar warna atau saiznya, atau menambah beberapa ikon, dsb. Selepas menyelesaikan operasi ini, kami boleh menerbitkan dan berkongsi halaman web dengan pengguna.

Ringkasnya, apabila membangunkan aplikasi web, adalah sangat penting untuk memberikan pengguna pengalaman pengguna yang lebih baik. Menambah butang tutup ringkas bukan sahaja memudahkan pengguna menutup halaman, tetapi ia juga menjadikan penggunaan apl lebih cekap. Mudah-mudahan, selepas membaca artikel ini, anda telah mempelajari cara menambah butang tutup menggunakan JavaScript.

Atas ialah kandungan terperinci Tambah javascript butang tutup. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!