Cara menggunakan JavaScript untuk mencapai kesan penutupan pada klik kedua

PHPz
Lepaskan: 2023-04-26 15:12:01
asal
772 orang telah melayarinya

Dengan pembangunan berterusan teknologi bahagian hadapan, tapak web menjadi lebih interaktif, dan semakin banyak tapak web perlu menggunakan JavaScript untuk mencapai pelbagai kesan. Antaranya, acara klik adalah yang paling biasa, dan dalam sesetengah tapak web, terdapat lebih banyak kes di mana anda perlu mengklik sekali lagi untuk menutup selepas mengklik. Jadi, persoalannya, bagaimana untuk mencapai kesan JavaScript menutup klik kedua?

1. Idea asas

Tidak sukar untuk mencapai kesan dekat kedua daripada klik JavaScript Idea asas adalah seperti berikut:

1 tambahkan setiap klik.

2. Apabila bilangan klik mencapai nombor yang ditentukan, lakukan operasi penutupan.

2. Pelaksanaan

Mari laksanakan fungsi ini melalui contoh.

  1. Bahagian HTML
<body>

  <h1>JavaScript点击第二次关闭</h1>

  <p>这是一个演示点击第二次关闭的效果的实例。</p>

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

  <script src="main.js"></script>

</body>
Salin selepas log masuk
  1. Bahagian JavaScript
var closeBtn = document.getElementById("closeBtn");
var clickCount = 0;

closeBtn.onclick = function() {
  clickCount++;
  
  if (clickCount == 2) {
    window.close();
  }
};
Salin selepas log masuk
  1. Bahagian CSS (pilihan)
button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px;
  cursor: pointer;
}
Salin selepas log masuk

3. Untuk mencapai kesan

Apabila anda mengklik butang sekali, tetingkap tidak akan ditutup; tetingkap akan ditutup secara automatik.

4. Nota

1 Peristiwa klik boleh berupa butang, hiperpautan, dll.; 🎜>

3 Operasi penutupan boleh menjadi sebarang operasi, seperti menutup halaman web, menyembunyikan butang, dsb.

Ringkasnya, mengikut keperluan sebenar dan penggunaan idea asas yang fleksibel, kesan penutupan JavaScript untuk kali kedua boleh dicapai.

Atas ialah kandungan terperinci Cara menggunakan JavaScript untuk mencapai kesan penutupan pada klik kedua. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan