2 글 보임 - 1 에서 2 까지 (총 2 중에서)
-
글쓴이글
-
2023년 8월 5일 23:15 #93581
방수연참가자안녕하세요 선생님
<<위에서 만든 <div>안에 "5초 이내 구매시 사은품 증정" 이라는 문자가 있습니다.
1초마다 5라는 문자를 1씩 감소시켜봅시다.
0이 되면 <div>를 안보이게 처리합시다. >> => 이 부분 숙제를 하다가 막히는 부분이 있어 질문드립니다. 아래 파란글씨와 같이 코드를 짰는데요 왜 아래의 html에서는 작동하지 않는 걸까요? 코드문제인가 싶어서 이리저리 수정을 해보다가 새로운 html을 만들어서 거기에 코드를 복붙해보니 잘작동하네요 ㅠㅠ 무언가 충돌되는 부분이 있는걸까요 ? 개발자모드 콘솔창에도 아무런 오류가 뜨질않았어요 답변해주시면 감사드리겠습니다!
<!doctype html> <html lang="en">
<head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="./main.css"> <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> <title>Hello, world!</title> </head>
<body> <div class="progress-bar"> <div class="progress"></div> </div> <script> const progressBar = document.querySelector('.progress');document.addEventListener('scroll', () => { const scrollTop = document.documentElement.scrollTop; const clientHeight = document.documentElement.clientHeight; const scrollHeight = document.documentElement.scrollHeight;const progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
progressBar.style.width = `${progress}%`; });</script>
<!-- * 버튼 누르면 모달창 띄우기 --> <!-- <button id="login">로그인</button> --> <div class="black-bg content"> <div class="white-bg"> <h4>로그인하세요</h4> <form action="success.html"> <div class="my-3"> <input type="text" class="form-control" id="email"> </div> <div class="my-3"> <input type="password" class="form-control" id="pwd"> </div> <button type="submit" class="btn btn-primary">전송</button> <button type="button" class="btn btn-danger" id="close">닫기</button> </form> </div> </div> <!-- * form action작성하기 --> <script> // * 입력값 공백시 alert 경고 & from 전송 막는 preventDefault() $('form').on('submit', function (noSubmitForm) { var 입력한값 = document.getElementById('email').value; if (입력한값 == '') { alert('아이디를 입력하세요'); noSubmitForm.preventDefault(); } if (/\S+@\S+\.\S+/.test(입력한값) == false) { alert('이메일형식이 아닙니다') noSubmitForm.preventDefault(); } var 비번 = document.getElementById('pwd').value; if (비번 == '') { alert('비밀번호를 입력하세요'); noSubmitForm.preventDefault(); } if (비번.length < 6) { alert('비밀번호는 6자 이상 작성해주세요'); noSubmitForm.preventDefault(); } if (/[A-Z]/.test(비번) == false) { alert('비밀번호에 적어도 대문자1개를 입력해주세요'); noSubmitForm.preventDefault(); } }); </script><nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand">Navbar</span> <span class="badge bg-dark ms-auto mx-3">Dark 🔄</span> <button class="navbar-toggler" type="button"> <span class="navbar-toggler-icon"></span> </button> </div> </nav> <!-- * 다크모드 기능 구현 --> <script> var 클릭횟수 = 0; $('.badge').on('click', function () { 클릭횟수++; if (클릭횟수 % 2 == 1) { $('.badge').html('Light 🔄'); $('body').removeClass('light-mode').addClass('dark-mode'); } else if (클릭횟수 % 2 == 0) { $('.badge').html('Dark 🔄') $('body').removeClass('dark-mode').addClass('light-mode'); }}) </script>
<!-- * 스크롤 이벤트리스너 --> <script> $(window).on('scroll', function () { // -강제로 스크롤 하기: window.scrollTo(x,y); //-현재 위치부터 강제로 스크롤하기 :window.scrollBy(x,y); // $(window).on('scroll', function () { // -현재 스크롤바 위치 출력 = scrollY // $(window).scrollTop() // }) if (window.scrollY > 100) { $('.navbar-brand').css('font-size', '20px') } else if (window.scrollY < 100) { $('.navbar-brand').css('font-size', '30px'); } }); </script><!--* class 부착식 개발 : 애니메이션 추가 쉬움, 나중에 재사용 편리 --> <ul class="list-group"> <li class="list-group-item">An item <li class="list-group-item">A second item <li class="list-group-item">A third item <li class="list-group-item">A fourth item <li class="list-group-item">And a fifth one <script> // document.querySelector('.list-group') : 특징 = > 첫번째.list - group만 찾아줌 // document.querySelectorAll('list-group') : 다찾아줌 // => 그러므로[] : 인덱싱 이용해서 찾기document.getElementsByClassName('navbar-toggler')[0]. addEventListener('click', function () { //toggle: show가 있으면 제거, 없으면 추가 document.getElementsByClassName('list-group')[0].classList.toggle('show'); }) </script><div class="main-bg"> <h4>Shirts on Sale</h4> <button id="login" class="btn btn-danger">로그인</button> </div>
<h3> <span style="color: #0000ff;"><div class="alert alert-danger"></span>
<span style="color: #0000ff;"> <span class="num">5</span>초 이내 구매시 사은품 증정</span>
<span style="color: #0000ff;"> </div></span>
<span style="color: #0000ff;"> <!-- * setTumeOut()함수 사용하기 --></span>
<span style="color: #0000ff;"> <!-- setTimeout(function(){ 실행할코드~ }, 기다릴시간); --></span>
<span style="color: #0000ff;"> <script></span>
<span style="color: #0000ff;"> // setTimeout(함수, 6000)</span>
<span style="color: #0000ff;"> // // 콜백함수 자리엔 만들어둔 함수 넣을 수 있음</span>
<span style="color: #0000ff;"> // function 함수() {</span>
<span style="color: #0000ff;"> // $('#login').css('font-size', '40px');</span>
<span style="color: #0000ff;"> // }</span></h3>
<h3><span style="color: #0000ff;"> // * 1초 마다 코드 실행하고싶음</span>
<span style="color: #0000ff;"> // setInterval(function(){})</span></h3>
<h3><span style="color: #0000ff;"> var count = 5;</span>
<span style="color: #0000ff;"> function time() {</span>
<span style="color: #0000ff;"> count -= 1;</span>
<span style="color: #0000ff;"> if (count >= 0) {</span>
<span style="color: #0000ff;"> document.querySelector('.num').innerHTML = count;</span>
<span style="color: #0000ff;"> }</span>
<span style="color: #0000ff;"> else if (count == -1) {</span>
<span style="color: #0000ff;"> clearTimeout(타이머);</span>
<span style="color: #0000ff;"> }</span>
<span style="color: #0000ff;"> }</span></h3>
<h3><span style="color: #0000ff;"> setInterval(time, 1000);</span></h3>
<h3><span style="color: #0000ff;"> </script></span></h3><div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptas voluptatum minus praesentium fugit debitis at, laborum ipsa itaque placeat sit, excepturi eius. Nostrum perspiciatis, eligendi quae consectetur praesentium exercitationem. </div> <!-- * 박스 끝까지 스크롤시 알림띄우기 --> <script> //div 스크롤바 내린 양 + 눈에보이는div높이 == div 실제높이 $('.lorem').on('scroll', function () { var 스크롤양 = document.querySelector('.lorem').scrollTop; var 실제높이 = document.querySelector('.lorem').scrollHeight; var 높이 = document.querySelector('.lorem').clientHeight; console.log(스크롤양, 실제높이, 높이); if (스크롤양 + 높이 > 실제높이 - 10) { alert('다읽음'); } }); </script> <div style="height: 1000px;"></div>
<!-- *one-way UI 애니메이션 만들기 1. 시작스타일 & 2.최종스타일 (class로 만들어놓기) 3. 원할 때 최종스타일로 변하라고 코드짬 4.transiton 추가 --> <script> $('#login').on('click', function () { $('.black-bg').addClass('show-modal'); })$('#close').on('click', function () { $('.black-bg').removeClass('show-modal'); })</script>
<!-- * jquery 사용법 1. 구글에 jquery cdn 검색 2. jQuery 3.x => minifiend 클릭후 코드 복붙 3. 설치한 곳 하단에서 jquery 문법 사용가능 --> <!-- <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script> --> <!-- <p class="hello">안녕</p> <p class="hello">안녕</p> <p class="hello">안녕</p> <button id="test-btn">버튼</button> <script> // 장점1. 코드가 짧고 간단 $('.hello').html('바보'); $('.hello').css('color', 'red'); $('.hello').addClass('show');//장점2. ''에 해당하는 모든 요소를 찾아준다(js는 []로 지정해줘야함) $('.hello').html('바보');//장점3. 이벤트리스너도 짧아짐 on == eventListner $('#test-btn').on('click', function () { $('.hello').css('fontSize', '40px'); })//장점3. 쉬운 UI 애니메이션 $('#test-btn').on('click', function () { $('.hello').fadeOut(); }) </script> --><!-- * UI 캐러셀 만들기 --> <div style="overflow: hidden;"> <div class="slide-container"> <div class="slide-box"> < img src="./car1.png" alt="car1"> </div> <div class="slide-box"> < img src="./car2.png" alt="car2"> </div> <div class="slide-box"> < img src="./car3.png" alt="car3"> </div> <!-- <div class="slide-box"> < img src="./car1.png" alt="car4"> </div> --> </div> </div> <button class="slide-1">1</button> <button class="slide-2">2</button> <button class="slide-3">3</button> <button class="previous">이전</button> <button class="next">다음</button> <script> // * 버튼 1, 2, 3 $('.slide-1').on('click', function () { 지금사진 = 0; $('.slide-container').css('transform', 'translateX(-' + 지금사진 + '0vw)'); }) $('.slide-2').on('click', function () { 지금사진 = 1; $('.slide-container').css('transform', 'translateX(-' + 지금사진 + '00vw)'); }) $('.slide-3').on('click', function () { 지금사진 = 2; $('.slide-container').css('transform', 'translateX(-' + 지금사진 + '00vw)'); })// * 버튼 이전, 다음 // $('.previous').on('click', function () { // var 지금사진 = 1; // if (지금사진 == 1) { // $('.slide-container').css('transform', 'translateX(-300vw)'); // 지금사진++; // } // else if (지금사진 == 2) { // $('.slide-container').css('transform', 'translateX(0vw)'); // 지금사진++; // } // else if (지금사진 == 3) { // $('.slide-container').css('transform', 'translateX(-200vw)'); // 지금사진++; // } // })var 지금사진 = 1;
$('.previous').on('click', function () { if (지금사진 == 1) { 지금사진 = 3; } else { 지금사진--; } $('.slide-container').css('transform', 'translateX(' + (-100 * (지금사진 - 1)) + 'vw)'); })$('.next').on('click', function () { if (지금사진 >= 3) { $('.slide-container').css('transform', 'translateX(0vw)'); 지금사진 = 1; } else { $('.slide-container').css('transform', 'translateX(-' + (지금사진 * 100) + 'vw)'); 지금사진++; } });// $('.next').on('click', function () { // var 지금사진 = 0; // if (지금사진 >= 4) { // document.querySelector('slide-container').style.transform = 'translate(-200vw)'; // } else { // document.querySelector('.slide-container').style.transform = 'translate(-' + 지금사진 + '00vw)'; // 지금사진 += 1; // }; // });// $('.previous').on('click', function () { // var 지금사진 = 0; // if (지금사진 <= 0) { // $('.slide-container').style.transform = 'translate(0vw)'; // } else { // $('.slide-container').style.trnasform = 'translate(-' + (지금사진 - 2) + '00vw)'; // 지금사진 -= 1; // } // });</script> <p>태조 이성계가 태어난 년도는?</p> <input type="text" id="answer"> <button id="send-answer">제출</button>
<script> var count = 0; document.querySelector('#send-answer').addEventListener('click', function () { count++; //이벤트 리스너 안쪽에 놔야지 버튼 클릭할 때마다 변경된 값가져온다 //만약 바깥에 두면 새로고침시 1회 실행되기 때문에 변경된 값 가져올 수 없다. var answer = $('#answer').val(); if (answer == '1335') { alert('성공') } else if (count >= 3 || answer != '1335') { alert('멍청이') } }) </script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body>
</html>
-
글쓴이글
2 글 보임 - 1 에서 2 까지 (총 2 중에서)
- 답변은 로그인 후 가능합니다.