-
javascriptJAVASCRIPT 2022. 1. 18. 17:11
BOM
마지막: 윈도우 시계
<style>.bg-img{position: absolute;top: 0; left: 0; width: 100%; height: 100%;z-index: -1;animation: fadeIn .5s linear;}@keyframes fadeIn{from{opacity: 0;}to{opacity: 1;}}.clock h1{color: white;}</style></head><body><div class="clock"><h1>00:00:00</h1></div><script>function createTime(){const $clock = document.querySelector('.clock h1');const date = new Date();const hour = date.getHours();const minute = date.getMinutes();const second = date.getSeconds();const time = (hour < 10 ? '0' + hour : hour) + ' : ' +(minute < 10 ? '0' + minute : minute) + ' : ' +(second < 10 ? '0' + second : second);$clock.textContent = time;}let count = 0;function changeBackGround(){const bgList = [1,2,3,4];const $img = document.createElement('img');$img.src = `../6. QUIZ/img/${bgList[count]}.jpg`;$img.classList.add('bg-img');document.body.appendChild($img);count++;if(count === bgList.length){count = 0;}}(function() {createTime();setInterval(createTime, 1000);changeBackGround();setInterval(changeBackGround, 10000);})();</script></body>
배경이 휙휙 바뀌고 윈도우 시계가 오른쪽 상단에 뜨는 결과
쿠키
<body>쿠키 이름: <input type="text" id="cookieName"><br>쿠키 값: <input type="text" id="cookieValue"><br><button id="make">쿠키 생성</button><br>찾을 쿠키: <input type="text" id="cookieFind"><button id="get">쿠키 확인</button><script>const $make = document.getElementById('make');$make.addEventListener('click', createCookie);//쿠키 생성하기function createCookie(){const name = document.getElementById('cookieName').value;const value = document.getElementById('cookieValue').value;}//쿠키의 유효시간 설정const date = new Date();date.setDate(date.getDate() + 7);//쿠키에 저장할 문자열 생성let cookie = '';cookie += name + '=' + value + ';' //키 = 값; 설정cookie += 'expires=' + date.toUTCString(); //쿠키의 유효일자 설정//쿠키에 저장document.cookie = cookie;//쿠키 확인const $get = document.getElementById('get');$get.addEventListener('click', getCookie);function getCookie(){const find = document.getElementById('cookieFind').value;console.log(document.cookie); //쿠키 확인const cookies = document.cookie.split(';');console.log(cookies);let flag = false;for(let c of cookies){if(c.search(find) !== -1){ //값을 찾은 위치를 반환, 없으면 -1 반환console.log(c.replace(find + '=', '')); //쿠키의 이름을 지우기 위해 빈 문자열로 대체flag = true;break;}}if(!flag){console.log('그런 쿠키는 존재하지 않습니다.');}}</script></body>나머지 시간은 실습을 했는데.. up&down 게임 만들기!
이건 조금 더 복습해 보고 나중에 올려야겠다.
'JAVASCRIPT' 카테고리의 다른 글
javascript (0) 2022.01.17 javascript (0) 2022.01.14 javascript (0) 2022.01.13 javascript (0) 2022.01.12 javascript (0) 2022.01.12