Butang tutup pengeluaran javascript pengeluaran halaman web

Dengan perkembangan Internet, halaman web telah menjadi bahagian yang sangat diperlukan dalam kehidupan orang ramai. Bagi pembangun web, sebagai tambahan kepada susun atur halaman, gaya dan elemen lain, adalah juga penting untuk melaksanakan beberapa fungsi, antaranya butang tutup adalah fungsi penting.

Butang tutup biasanya digunakan pada elemen seperti lapisan terapung atau tetingkap timbul, membolehkan pengguna menutup elemen ini dengan mudah dan meningkatkan pengalaman pengguna.

Jadi, bagaimana cara menggunakan javascript untuk membuat butang tutup dalam pengeluaran halaman web? Mari lihat di bawah.

1. Membuat butang tutup dalam HTML

Pertama, kita perlu mencipta elemen butang tutup dalam HTML. Kodnya adalah seperti berikut:

<button id="closeBtn">关闭</button>

Anda boleh mendapati bahawa kami memberikan butang atribut id dan menamakannya "closeBtn".

2. Reka bentuk gaya CSS butang tutup

Seterusnya, kita perlu menggunakan gaya CSS untuk mereka bentuk beberapa gaya untuk butang. Kodnya adalah seperti berikut:

#closeBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  background-color: #ddd;
  border: none;
  cursor: pointer;
}

Di sini, kami menambahkan beberapa gaya pada butang, seperti kedudukan, warna latar belakang, jidar, dll., untuk paparan yang lebih baik pada halaman.

3. Javascript untuk melaksanakan butang tutup

Akhir sekali, kita boleh menggunakan Javascript untuk melaksanakan fungsi butang tutup. Kodnya adalah seperti berikut:

var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function() {
  var popup = document.getElementById("popup");
  popup.style.display = "none";
}

Seperti yang anda lihat, kami mula-mula mendapatkan elemen butang tutup melalui kaedah getElementById(), dan kemudian gunakan acara onclick untuk memantau gelagat klik pengguna Setelah butang diklik, kita boleh mendapatkan elemen tetingkap timbul dan menyembunyikannya melalui harta style.display.

Selain itu, anda boleh menambah kesan animasi pada butang untuk meningkatkan pengalaman pengguna. Kodnya adalah seperti berikut:

#closeBtn:hover {
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

Di sini, kami menambah kelas pseudo :hover pada butang, menggunakan atribut transform untuk menskalakannya dan menggunakan atribut peralihan untuk mengawal kelajuan dan animasi penskalaan.

Ringkasan

Melalui langkah di atas, kita boleh menggunakan Javascript dengan mudah untuk membuat butang tutup. Sudah tentu, untuk menjadikan fungsi ini berfungsi dengan lebih baik, kita juga perlu mencipta elemen yang sepadan pada halaman, menggunakan CSS untuk penggayaan dan menambah fungsi mendengar acara yang sepadan dalam Javascript.

Dalam pembangunan sebenar, butang tutup adalah fungsi yang biasa digunakan Dengan menggunakan Javascript untuk mencipta butang tutup, ia bukan sahaja dapat meningkatkan pengalaman pengguna keseluruhan halaman web, tetapi juga menjadikan halaman web lebih cantik. dan praktikal, sekali gus memenuhi keperluan fungsian dan pengalaman.

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