자바스크립트에서 제공하는 setInterval이라는 함수를 이용하여 화면에 나타내보자
setInterval(함수, 시간(0.001초 단위))
<!DOCTYPE html>
<html lang="ko">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!-- 경로 해결 문제 : <script type="text/javascript" src="../../js/jquery-3.5.1.min.js"></script> -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timer Example</title>
<style>
#output {
border: 1px solid black;
width: 30px;
text-align: center;
padding: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var count = 0;
var $output = $("#output");
setInterval(function(){
count++;
$output.text(count);
}, 1000);
});
</script>
</head>
<body>
<div id="output">
0
</div>
</body>
</html>
jquery 부분을 첨부하는데 경로문제가 생겨 웹상에서 가져왔다.
나중에 해결해야할 부분이고
$를 쓰려면 jquery가 꼭 필요하다.
$(document) 는 웹 페이지가 실행될 때 초기 설정을 의미한다.
728x90
반응형
'HTML > Javascript 기초' 카테고리의 다른 글
| [Javascript] clearInterval 사용해보기 (0) | 2020.07.31 |
|---|---|
| [Javascript] timeout 사용해보기 (0) | 2020.07.31 |
| [Javascript] 데이터 형변환 (0) | 2020.07.31 |
| [Javascript] 전역변수, 지역변수 (0) | 2020.07.31 |
| [Javascript] 자바스크립트 클래스 생성하기 (0) | 2020.07.31 |
