javascript secara automatik hilang segera

Apabila membangunkan aplikasi web, selalunya perlu memberikan beberapa maklumat segera kepada pengguna. Mesej gesaan ini boleh digunakan untuk membimbing pengguna ke langkah seterusnya, atau untuk memberi amaran kepada pengguna bahawa operasi tertentu boleh membawa kepada akibat yang tidak dapat dipulihkan. Secara umumnya, gesaan ini perlu ditutup secara manual oleh pengguna, tetapi dalam beberapa kes, kami berharap gesaan tersebut akan hilang secara automatik dalam tempoh masa tertentu. Artikel ini akan memperkenalkan cara menggunakan javascript untuk menghilangkan maklumat segera secara automatik.

1. Persediaan

Untuk merealisasikan maklumat segera yang hilang secara automatik, kita perlu menggunakan teknologi berikut:

• HTML/CSS: digunakan untuk mencipta Rupa dan susun atur maklumat segera.
• JavaScript: digunakan untuk mengawal prestasi dan kelakuan maklumat segera.

Mula-mula, buat bekas dalam HTML untuk menyimpan maklumat segera. Anda boleh menggunakan elemen div tetap, seperti yang ditunjukkan di bawah:

<div id="alert-container"></div>

Kedua, gunakan gaya CSS untuk mengawal penampilan dan reka letak bekas ini. Untuk memastikan bekas sentiasa berada di bahagian atas halaman, gunakan atribut position:fixed. Untuk menjadikan bekas mengisi seluruh tetingkap, anda boleh menetapkan sifat atas, kiri, kanan dan bawah kepada 0. Di samping itu, untuk menjadikan bekas kelihatan lebih cantik, anda boleh menetapkan beberapa gaya untuk bekas, seperti warna latar belakang, sempadan, dll.

#alert-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 10px #ccc;
  padding: 20px;
  font-size: 16px;
  color: #000;
  text-align: center;
}

Kini, kami mempunyai bekas sedia untuk memaparkan petua alat.

2. Paparkan maklumat segera

Seterusnya, kita perlu menulis kod untuk memaparkan maklumat segera. Dalam JavaScript, anda boleh menggunakan API DOM untuk mencipta dan mengubah suai elemen HTML. Untuk menjadikan maklumat gesaan hilang secara automatik, kita boleh mula-mula menggunakan fungsi setTimeout untuk mengawal masa apabila maklumat gesaan dipaparkan, dan kemudian gunakan API DOM untuk menambahkan maklumat gesaan secara dinamik pada bekas dan menambah pendengar acara ke maklumat gesaan supaya apabila pengguna mengklik Mesej gesaan dipadam secara automatik apabila butang ditutup.

Berikut ialah contoh kod yang mencipta fungsi amaran yang akan memaparkan maklumat gesaan dalam bekas dan memadamkannya secara automatik selepas tempoh masa tertentu.

function alert(msg, duration) {
  var container = document.getElementById('alert-container');
  var alert = document.createElement('div');
  alert.innerHTML = msg;
  alert.setAttribute('class', 'alert');
  container.appendChild(alert);
  setTimeout(function() {
    alert.parentNode.removeChild(alert);
  }, duration);
}

Dalam fungsi ini, kami mula-mula mendapatkan elemen bekas, dan kemudian mencipta elemen div baharu, yang mengandungi maklumat segera. Kami juga menetapkan atribut kelas untuk menggayakan petua alat secara khusus dalam lembaran gaya CSS.

Seterusnya, kami menambah elemen div yang baru dibuat pada bekas.

Akhir sekali, kami menggunakan fungsi setTimeout untuk menetapkan pemasa untuk memadamkan maklumat segera selepas tempoh masa tertentu. Kami menggunakan fungsi parentNode dan removeChild untuk mengalih keluar maklumat segera. Dengan cara ini, apabila pengguna mengklik butang tutup, proses pengalihan keluar automatik sebenarnya dipanggil, kerana pengendali acara butang tutup mengalih keluar elemen dengan maklumat segera daripada DOM.

3. Menggunakan Makluman

Kini, kami telah menyediakan kod JavaScript untuk memaparkan makluman yang hilang secara automatik. Untuk menggunakan ciri ini dalam aplikasi anda, hanya panggil fungsi amaran dan hantar mesej dan tempoh.

Contohnya:

alert('操作成功！', 3000); // 在3秒后自动消失

Ini akan memaparkan mesej gesaan dalam bekas, menggesa pengguna bahawa operasi itu berjaya dan ia akan hilang secara automatik selepas 3 saat.

4. Ringkasan

Apabila membangunkan aplikasi web, maklumat segera adalah keperluan yang sangat biasa. Menggunakan JavaScript, anda boleh dengan mudah menyedari maklumat segera yang hilang secara automatik, yang boleh meningkatkan pengalaman pengguna dan mengurangkan beban operasi pengguna. Jika anda ingin mempelajari lebih banyak kemahiran JavaScript, anda boleh menyemak lebih banyak tutorial JavaScript.

Atas ialah kandungan terperinci javascript secara automatik hilang segera. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!