728x90
![자바스크립트_예제_[HTML소스포함]_"마우스를_클릭하면 숫자_증가"_JavaScript_예제](https://blog.kakaocdn.net/dn/drkkaD/btsB0f1xrJy/sdAaOcNMsmISE8tSpmCFfk/img.png)
JavaScript 예제로
"마우스를 클릭하면 숫자가 증가하는 카운터"
자바스크립트 예제 소스 전체
<!DOCTYPE html>
<html>
<head>
<title>마우스를 클릭하면 숫자가 증가하는 카운터</title>
<style>
#counter {
font-size: 50px;
color: #ff0000;
}
</style>
</head>
<body>
<div id="counter">0</div>
<script>
// 변수 count를 0으로 초기화합니다.
let count = 0;
// 함수 increaseCount는 마우스를 클릭할 때마다 count를 1씩 증가시키고,
// 증가한 count를 HTML 요소의 innerHTML 속성에 적용하여 화면에 출력합니다.
function increaseCount() {
count++;
document.getElementById("counter").innerHTML = count;
}
// 이벤트 리스너를 추가하여 마우스를 클릭할 때마다 increaseCount 함수를 호출합니다.
document.addEventListener("click", increaseCount);
</script>
</body>
</html>
위 코드에서 변수 count는 마우스를 클릭할 때마다 증가하는 숫자를 저장하는 변수입니다.
함수 increaseCount는 마우스를 클릭할 때마다 count를 1씩 증가시키고,
증가한 count를 HTML 요소의 innerHTML 속성에 적용하여 화면에 출력합니다.
이벤트 리스너를 추가하여 마우스를 클릭할 때마다 increaseCount 함수를 호출합니다.
HTML 요소의 innerHTML 속성은 요소의 내부에 있는 텍스트를 변경하는 속성입니다.
이벤트 리스너는 이벤트가 발생할 때마다 특정 함수를 호출하는 기능입니다.
위 코드를 실행하면
마우스를 클릭할 때마다 숫자가 1씩 증가하는 카운터가 나타납니다.
반응형
'정보' 카테고리의 다른 글
| [프로그램 제거] FPRTSetup 삭제, 제거 가능? (0) | 2023.12.22 |
|---|---|
| [프로그램 제거] Fitbit Coach 삭제, 제거 가능? (0) | 2023.12.22 |
| [HTML소스포함] 클릭으로 박스 이동하기, JavaScript 예제 (0) | 2023.12.08 |
| [HTML소스포함] "Canvas 게임", JavaScript 예제 (0) | 2023.12.07 |
| [HTML소스포함] 마우스따라 움직이는 눈동자, JavaScript 예제 (0) | 2023.12.07 |
댓글