집 > 기사 > 웹 프론트엔드 > 두 번째 클릭으로 닫히는 효과를 얻기 위해 JavaScript를 사용하는 방법

두 번째 클릭으로 닫히는 효과를 얻기 위해 JavaScript를 사용하는 방법

PHPz원래의: 2023-04-26 14:24:54763검색

프런트엔드 기술의 지속적인 발전으로 인해 웹사이트는 점점 더 인터랙티브해지고 있으며, 다양한 효과를 얻기 위해 JavaScript를 사용해야 하는 웹사이트가 점점 더 많아지고 있습니다. 그 중 클릭 이벤트가 가장 흔하며, 일부 웹사이트에서는 클릭 후 다시 클릭하여 닫아야 하는 경우가 점점 더 많아지고 있습니다. 그렇다면 문제는 JavaScript가 두 번째 클릭을 닫는 효과를 어떻게 달성할 것인가 하는 것입니다.

1. 기본 아이디어

자바스크립트 클릭의 두 번째 닫기 효과를 얻는 것은 어렵지 않습니다.

1. 클릭 이벤트를 모니터링하고 클릭 횟수를 누적합니다.

2. 클릭 횟수가 지정된 횟수에 도달하면 종료 작업을 수행합니다.

2. 구현

이제 예제를 통해 이 기능을 구현해 보겠습니다.

HTML 부분

<body>

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

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

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

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

</body>

JavaScript 부분

var closeBtn = document.getElementById("closeBtn");
var clickCount = 0;

closeBtn.onclick = function() {
  clickCount++;
  
  if (clickCount == 2) {
    window.close();
  }
};

CSS 부분(선택)

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;
}

3. 효과를 얻으려면

버튼을 한 번 클릭하면 창이 닫히지 않습니다.

버튼을 두 번 클릭하면 창이 자동으로 닫힙니다.

4. 참고

1. 클릭 이벤트는 버튼, 하이퍼링크 등이 될 수 있습니다.

2. 클릭 수는 임의의 숫자로 지정할 수 있습니다. 웹 페이지를 닫고 버튼 등을 숨기는 등의 작업을 수행할 수 있습니다.

요컨대, 실제 필요와 기본 아이디어의 유연한 사용에 따라 두 번째로 JavaScript 닫기 효과를 얻을 수 있습니다.

위 내용은 두 번째 클릭으로 닫히는 효과를 얻기 위해 JavaScript를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：자바스크립트 API란?다음 기사：자바스크립트 API란?