JavaScript 입문과 웹 UI개발(13)-setTimeout 타이머주는 법
2022. 10. 3. 10:02ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<div class="alert alert-danger">
<span id="cho"></span>초 이내 구매시 사은품 증정
<!-- div는 줄바꿈이 되지만 span은 줄바꿈 하지 않음 -->
</div>
<script>
var cnt=5;
$('#cho').html(cnt);
// setTimeout(콜백함수, ms단위 시간)
// ms단위 시간 후에 콜백함수가 실행됨
setTimeout(function(){$('.alert').hide()}, 5000)
//setInterval(콜백함수, ms단위 시간)
//함수가 ms단위 시간마다 실행됨
setInterval(function(){
cnt--;
$('#cho').html(cnt);
}, 1000)
//if var function 자바스크립트 문법
// document.querySelector() setTimeout() setInterval() 브라우저 사용법
//자바스크립트 문법 뿐만 아니라 브라우저 사용법도 잘알아야 함
//숙제
// 매초바다 5초 이내 구매시 사은품 증정에서 5초가 4, 3, 2, 1로 변하게 하시오
//위에 답 적용해놨음
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(15)-코드 3줄로 캐러셀 (이미지 슬라이드) 만들기 (0) | 2022.10.04 |
|---|---|
| JavaScript 입문과 웹 UI개발(14)-정규식으로 이메일형식 검증해보기 (0) | 2022.10.03 |
| JavaScript 입문과 웹 UI개발(12)-변수, 사칙연산 실력향상 과제 (0) | 2022.10.03 |
| JavaScript 입문과 웹 UI개발(11)-변수문법과 Dark mode 버튼만들기 (0) | 2022.10.02 |
| JavaScript 입문과 웹 UI개발(10)-if/else,function 관련 문제 (0) | 2022.10.02 |