setTimeout으로 시간을 지정한 다음
그 시간동안 물고기 그림을 얼마나 클릭하나 확인하는 코드를 작성해본다.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>timer practice with a fish</title>
<style>
.panel {
display: inline-block;
width: 500px;
height: 500px;
text-align: center;
border: 1px solid;
}
.panel img {
margin-top: 30%;
width: 300px;
height: 200px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var socerId;
var $score = $("#score");
var $fish = $("#fish");
var count = 0;
var playing = true;
setTimeout(function(){
playing = false;
alert("게임이 종료되었습니다.");
}, 5000);
$fish.click(function(){
if(playing == true){
count++;
$score.text(count);
}
});
});
</script>
</head>
<body>
<div>
현재점수 <span id="score">0</span>
</div>
<div class="panel">
<img src="https://oceana.org/sites/default/files/styles/ntsc/public/800px-fmib_43250_butter_fish_poronotus_triacanthus.jpeg?itok=sdbvFNhg" id="fish">
</div>
</body>
</html>
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] Math 이용해서 실습 (0) | 2020.07.31 |
|---|---|
| [Javascript] 자바스크립트 수학(Math) 사용해보기 (0) | 2020.07.31 |
| [Javascript] clearInterval 사용해보기 (0) | 2020.07.31 |
| [Javascript] timeout 사용해보기 (0) | 2020.07.31 |
| [Javascript] timer 사용하기 (0) | 2020.07.31 |
