티스토리 뷰

유료강의/국비지원

웹퍼블리셔 기본 6일차 - 날짜함수, 제이쿼리

2021bong 2021. 9. 28. 19:07

2호선이 잠깐 멈춰서 3분 지각했다 ㅠㅠ 올 퍼펙트 출석하고 싶었는데.... 

<script>
const elToday = document.querySelectorAll('.today li');
let today = new Date('2021-07-30'); // 날짜 변경도 가능
let week = ['일','월','화','수','목','금','토'];
console.log(today);
elToday[0].textContent = today; // 0번째 <li>에 들어감
elToday[1].textContent = today.getFullYear(); // 1번째 <li>에 들어감
elToday[2].textContent = today.getMonth(); // 2번째 <li>에 들어감
elToday[3].textContent = today.getDate(); // 3번째 <li>에 들어감
elToday[4].textContent = week[today.getDay()]; // 4번째 <li>에 들어감
elToday[5].textContent = today.getHours()+"시"; // 5번째 <li>에 들어감
elToday[5].textContent += today.getMinutes()+"분"; // 5번째 <li>에 추가로 들어감
elToday[5].textContent += today.getSeconds()+"초"; // 5번째 <li>에 추가로 들어감
</script>

 

날짜 바꾸기

const elSetToday = document.querySelectorAll('.set-today li');
let setToday = new Date();
let oneDay = setToday.setDate(
  setToday.getDate() + 1
); // 1일 뒤의 시간

setToday = new Date();
let threeHours = setToday.setHours(
  setToday.getHours() + 3
); // 3시간 뒤의 시간
elSetToday[0].textContent = new Date(oneDay); // 0번째 <li>에 들어감
elSetToday[1].textContent = new Date(threeHours); // 1번째 <li>에 들어감

 

5초 후에 참여 가능하게 하기

let today = new Date(); // 현재 시간
let secs = today.setSeconds(
  today.getSeconds() + 5 
); // 5초 뒤 시간


btn.onclick = function (event) {
  if (secs < new Date()) { 
    alert('참여가능합니다!'); //5초가 지나서 today의 시간이 더 커졌을 때
  } else {
    alert('참여할 수 없습니다.'); //5초가 안지났을때
  }
}

+5초 후에 참여해서 입력하기

btn.onclick = function (event) {
  if (secs < new Date()) {
    let msg = String(prompt('받고싶은 상품을 입력해주세요!'));
    alert(msg + '를 응모하셨습니다.');
  } else {
    alert('참여할 수 없습니다.');
  }
}

프롬프트로 값을 받고 바로 응모 얼럿을 띄우면 되는데

괜히 아래로 빼서 값을 뒀다가 쓰려고 해서 msg가 선언이 안됐다고 열만 받았다! ㅠㅠ

어떻게든 밖으로 빼려고 낑낑댐..... 그런 방법이 있나요... 0928

 

 

디데이

//디데이 구하기
let dDay = new Date('2021-10-06') - new Date();  // 디데이까지 남은 시간
let oneTime = 24 * 60 * 60 * 1000; // 하루시간

elSetToday[3].textContent = 'D-' + Math.round(dDay / oneTime); 
// 디데이까지 남은 시간을 하루 시간으로 나눈 뒤 정수로 반올림

 

실시간으로 시간 나타내기

활용 > 슬라이드 넘기기

// 실시간으로 시간 나타내기
setInterval(function () {
  let date = new Date();
  let second = date.getSeconds();
  elSetToday[4].textContent = second;
}, 1000);

 

제이쿼리 이용하기 전에 플러그인 import 할 것!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

 

제이쿼리 기본 문법

<script>
  $('선택자').메소드();
</script>

 

속성 값은 이런식으로 사용

<script>
  $('.j-b').css({
    color:'#ff0000', //,사용
    border: 'solid 3px #000',
    padding: '30px',
    lineHeight: '3', //CSS와는 약간 다른 표기
  });
</script>
    lineHeight: '3',
    
    'line-height': '3', // 이렇게 표기할수도 있으나 비선호

 

<li>들을 클릭하면 색상이 바뀌게 하기

$('.j-b li').click(function(){
  $('.j-b li').eq(0).css({color: '#ff00ff'}); //eq 다중 선택자일 때 사용, nth-of-type과 비슷
}); // 0번째 li를 클릭하면 글자색을 바꿔줘라

 

어떤 <li>들을 선택해도 색이 바뀌게 하기

$('.j-b li').click(function(){
  let idx = $(this).index(); // this 사용(자기 자신), index() 사용(index의 숫자를 가져옴)
  $('.j-b li').eq(idx).css({color: '#ff00ff'}); // 변수 넣기
});

이렇게도 표현 가능

$('.j-b li').click(function(){
  $(this).css({color: '#ff00ff'});
});

 

+

숙제

클릭하면 색이 바뀌고 한 번 더 클릭하면 원래색으로 돌아오게 하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <ul class='j-b';>
    <li>일번</li>
    <li>이번</li>
    <li>삼번</li>
  </ul>
  <script>
    $('.j-b').css({
      color: '#000',
    })

    $('.j-b li').click(function(event){
      let color = $(this).css('color');
      if (color == 'rgb(0, 0, 0)'){
        $(this).css('color', '#ff00ff');
      } else{ 
        $(this).css('color', '#000');
      }
    });
</script>
</body>

</html>

어떻게 하는지는 알겠는데 조건문을 어떻게 써야할지 몰라서 한참을 헤맸다

class 적용할 때는 . 안쓰게 정신차리기 + ; 써서 닫아주기

 

$('.j-b li').click(function(event){
  let color = $(this).css('color');
  console.log(color); // color값을 콘솔에 찍거나 얼럿으로 확인해서 알아냄
  if (color == 'rgb(0, 0, 0)'){ //알아낸 값을 조건문에 넣기
    $(this).css('color', '#ff00ff');
  } else{ 
    $(this).css('color', '#000');
  }
});

jquery로 CSS 속성 잡기 > $(선택자).css('속성');

값은 안적고 속성만 적으면 됨

 

값을 콘솔이나 얼럿으로 확인해가면서 하기

 

rgb값 말고 HEX값으로 보이게 하는 방법은 없나요.... ㅠㅠ 그것때문에 엄청 헤맴 ㅠㅠ

 

+

선생님 풀이

let bln = true;
$('.j-b li').click(function () {
  if (bln){
    $(this).css({ color: '#ff00ff' });
  } else {
    $(this).css({ color: '#000' });
  }
  bln = !bln; 
  //!true ==> false 이 둘이 번갈아가면서 실행되서 잘 작동함
  //!false ==> true
});

 

이렇게 간단한...방법이....... ㅠㅠㅠㅠㅠ

역시 로직을 어떻게 짜느냐가 어려운 것이다...

 

+어 근데 이렇게 하니까 여러 개를 한 번씩 누르면 순서가 꼬임....

728x90

'유료강의 > 국비지원' 카테고리의 다른 글

웹퍼블리셔 기본 8일차 - js파일 로드, 자주 쓰는 제이쿼리 메소드  (0) 2021.09.30
웹퍼블리셔 기본 7일차 - 제이쿼리 메소드 및 활용  (0) 2021.09.29
웹퍼블리셔 기본 5일차 - switch 문, selector, 날짜함수  (0) 2021.09.27
웹퍼블리셔 기본 4일차 - while 문, for 문, 함수선언식, Math  (0) 2021.09.23
웹퍼블리셔 기본 3일차 - while 반복문, 조건문 활용  (0) 2021.09.15
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함