[자바웹프로그래밍] 팝업창 기능추가와 이미지 호버 기능 만들기

팝업창에 시간을 보여주는 기능을 추가하겠다.

js_popup.js 에 다음과 같은 코드를 작성한다.

 

시간을 보여주는 함수를 정의하고 여기서 Date()는 스크립트 안에 있는 시간을 확인할 수 있는 함수이다,

아래 함수는 ID가 divClock인걸 divClock에 저장하는 것이다.

 

시간에 관한 함수들도 전부 스크립크에 내장되어있는 함수이다. 간단하게 해석하면 12시가 넘어가면 오후를 출력후 12시가 넘어간 시간에 -12를 해서 오후OO시로 출력하게하고 그게 아니면 오전으로 출력하게 만든다. 

 

그리고 divClock.innerText = msg; 는 위의 결과값들을 divClock에 저장하는 것이다.

 

setTimeout은 내장함수로 1000을 붙여 1초마다 갱신한다는 표시이다.

 

 

 

그리고 popup.html에 다음과 같은 코드를 작성한다.

아까 js에서 찾은 id가 바로 여기서 선언한 id이다. 여기서 class는 C++에서 사용하는 그런 class가 아닌 꾸미기 위한 class이다.

 

이렇게 코드를 작성하고 실행하면

 

현재 시각이 잘 보이고 갱신되는걸 확인할 수 있다.

여기서 부트스트랩 디자인을 추가하고싶으면 글자와 시간부분을

 

이렇게 수정하고 popup.html에선 부트스트랩을 사용할 수 있는 링크를 설정안해놨기 때문에 

이 코드를 popup.html에 복사해 붙여넣어준다.

 

그리고 실행하면

 

이렇게 달라진걸 확인할 수 있다. 

 

다음은 이미지 호버이다. 마우스를 상호작용 되는 버튼에 갖다대면 마우스가 검지로 가리키는 모양을 본적이 있을것이다. 이게 이미지 호버이다. 이걸 마우스가 아닌 특정 이미지에도 적용할 수 있다.

 

 

여기에 적용해볼 것이다. 먼저 인터넷에서 저기에 넣을만한 롤 로고 하나를 다운받고 이름을 붙인 뒤 코드를 작성한다

ㅌ`다음과 같은 코드를 popup.js에 코드를 만들어주고 실행하면

 

마우스를 올리면 다음과같이 이미지가 바뀌는걸 알 수 있다.