내장객체 : 브라우저의 자바스크립트 엔진에 내장된 객체를 말하며, 필요한 경우 객체를 생성해 사용할 수 있다. 낸장객체로는 문자, 날짜, 배열, 수학, 정규표현객체 등이 있다.
날짜 정보 객체 : 현재 날짜 정보를 제공하는 Date 객체
<script>
let t=new Date();
//키워드(new) : 자바에서 기본적으로 제공하는 객체
//반드시 new 키워드를 세우고 변수안에 저장해주어야 한다.
let y=t.getFullYear();//객체. 메서드 여야 식이 성립됨 현재에선 내용이 확인되지 않는다.
//변수에 한번더 넣어주어야 한다.
console.log(y);
</script>
입력하는 메서드에 따라 출력되는 시간과 년도등 다양하게 나올 수 있다.
let t=new Date();
//키워드(new) : 자바에서 기본적으로 제공하는 객체
//반드시 new 키워드를 세우고 변수안에 저장해주어야 한다.
let y=t.getFullYear();//년도
//객체. 메서드 여야 식이 성립됨 현재에선 내용이 확인되지 않는다.
//변수에 한번더 넣어주어야 한다.
let m=t.getMonth();//월
let date=t.getDate();//일
let day=t.getDay();//요일
let time=document.querySelector(".time");
time.textContent=y+"년"+m+"월"+date+"일"+day+"요일"
출력이 되지만 컴퓨터에선 인덱스 번호로 인식하기 때문에
출력은 제대로 되지만 날짜가 지날때마다 유지보수를 해야한다 그렇기 때문에 인덱스 번호가 들어가도록 앞서 선언한 요일 변수를 넣어주면 데이터에 따라 자동변경이 된다.
<body>
div#wrap>header#header>h1.logo+nav.nav^main#container>section^footer
</body>
<body>
<div id="wrap">
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<main id="container">
<section></section>
</main>
<footer></footer>
</div>
</body>
속성
<body>
<div id="wrap">
<img src="./Date/images/cloud1.png" alt="cloud">
<img src="./Date/images/cloud1.png" alt="cloud">
<header id="header">
<h1 class="logo">
<a href="#">
<span class="blind">
Lorem
</span>
<span class="logo-img">
</span>
</a>
</h1>
<nav class="nav">
<strong class="blind">
메인메뉴
</strong>
<ul class="gnb">
<li><a href="#">About</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main id="container">
<section class="section">
<figure class="mobile">
<figcaption class="blind">모바일시계</figcaption>
<div class="mobile-in">
<div class="screen">
<div class="ampm">AM</div>
<div class="time">
<span class="t">00</span> :
<span class="t">00</span> :
<span class="t">00</span>
</div>
<div class="date">
<span class="d"></span>년
<span class="d"></span>월
<span class="d"></span>일
<span class="d"></span>요일
</div>
</div>
</figure>
</section>
</main>
<footer id="footer"></footer>
</div>
</body>
#wrap>img:nth-child(1){
position: absolute;
left: 0; top: 20px;
}
#wrap>img:nth-child(2){
position: absolute;
left: 500px; top: 80px;
}
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: inherit;
}
ul,ol{
list-style: none;
}
img{
max-width: 100%;
}
a, strong,span{
display: inline-block;
}
.blind{
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
margin: -1px;
clip: rect(0 0 0 0);
}
body{
font-family: "Orbitron", sans-serif;
font-weight: 400;
font-style: normal;
background: skyblue;
}
#wrap{
width: 100vw; height: 100vh;
min-width: 1200px;
overflow: hidden;
min-height: 1000px;
background: url(./Date/images/bg_morning.jpg) no-repeat center top/cover;
transition: 2s;
position: relative;
}
#wrap>img:nth-child(1){
position: absolute;
left: 0; top: 20px;
}
#wrap>img:nth-child(2){
position: absolute;
left: 500px; top: 80px;
}
#header{
position: fixed;
width: 100%;
left: 0; top: 0;
padding: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-img{
display: block;
width: 90px; height: 80px;
background: url(./Date/images/logo_b.png) no-repeat center center/contain;
}
/* 낮과 밤의 로고 색이 달라지도록 하기 위해서 백그라운드로 잡음 */
.gnb{
display: flex;
justify-content: space-around;
}
.gnb li{
padding: 5px 10px;
}
.gnb li a{
display: block;
padding: 5px 10px;
}
.mobile{
width: 1226px; height: 809px;
background: url(./Date/images/phone_morning.png) no-repeat center center/ cover;
position: fixed;
bottom:-50px; right: -50px;
}
.screen{
/* background: yellow; */
position: absolute;
left: 150px; top: 103px;
width: 550px; height: 300px;
padding: 60px;
/* text-align: center; */
/* display: flex;
justify-content: space-around;
align-items: center; */
}
.ampm{font-size: 20px;}
.time{font-size: 60px;}
.date{font-size: 30px;}
#footer{
font-size: 14px;
position: fixed;
left: 50px; bottom: 30px;
}
/*JAVASCRIPT*/
/*morning*/
#wrap.moring{
background-image: url(./Date/images/bg_morning.jpg);
color: #212121;
}
#wrap.moring .logo-img{
background-image: url(./Date/images/logo_b.png);
}
#wrap.moring .mobile{
background-image: url(./Date/images/phone_morning.png);
}
/*afternoon*/
#wrap.afternoon{
background-image: url(./Date/images/bg_afternoon.jpg);
color: #212121;
}
#wrap.afternoon .logo-img{
background-image: url(./Date/images/logo_b.png);
}
#wrap.afternoon .mobile{
background-image: url(./Date/images/phone_afternoon.png);
}
/*evening*/
#wrap.evening{
background-image: url(./Date/images/bg_evening.jpg);
color: #fff;
}
#wrap.evening .logo-img{
background-image: url(./Date/images/logo_w.png);
}
#wrap.evening .mobile{
background-image: url(./Date/images/phone_evening.png);
}
/*night*/
#wrap.night{
background-image: url(./Date/images/bg_night.jpg);
color: #fff;
}
#wrap.night .logo-img{
background-image: url(./Date/images/logo_w.png);
}
#wrap.night .mobile{
background-image: url(./Date/images/phone_night.png);
}
각 시간마다 자바를 사용해 이미지를 변경하기 위해서 해당 css를 미리 지정
자바에서 클래스리스트로 지정하여 넣어줄것이다. (add, remove)
let wrap=document.querySelector("#wrap");
let ampm=document.querySelector(".ampm");
let time=document.querySelectorAll(".t");
let date=document.querySelectorAll(".d");
let now=new Date();//날짜에 해당되는 변수를 선언
let hr=now.getHours();//시간을 선언 hr에
let min=now.getMinutes();//분을 선언 min에
let sec=now.getSeconds();//초를 선언 sec에
time[0].textContent=hr;
time[1].textContent=min;
time[2].textContent=sec;
시간이 출력되어 나오지만 초시간이 가지는 않는다.
let wrap=document.querySelector("#wrap");
let ampm=document.querySelector(".ampm");
let time=document.querySelectorAll(".t");
let date=document.querySelectorAll(".d");
// setInterval(함수, 시간)
setInterval(newTime, 1000) //함수 호출
function newTime(){
let now=new Date();//날짜에 해당되는 변수를 선언
let hr=now.getHours();//시간을 선언 hr에
let min=now.getMinutes();//분을 선언 min에
let sec=now.getSeconds();//초를 선언 sec에
time[0].textContent=hr;
time[1].textContent=min;
time[2].textContent=sec;
}//선언적 함수
함수를 선언해서 앞서 지정하였던 식을 안에 넣어주고 해당 시간의 흐름을 1000(1초)으로 지정 해주면 시간이 흐르게 된다. 여기서 또 문제는 0초부터 9초는 1자리 숫자이기 때문에 여백이 생기게 되어 디자인적으로 통일성이 사라져 보일 수 있기 때문에 숫자가 한자리일때 숫자앞에 0을 추가하는 자바를 추가로 지정해줄 것이다.
//숫자가 한자리일때 숫자앞에 0을 추가
if(sec<10){
sec="0"+sec
}
if 식으로 조건식을 만들어서 초의 단위가 만약 10보다 작다면 "문자" 0을 sec 앞에 더하고 (그냥 +를 넣게되면 숫자적으로 합해지기 때문에 꼭 문자식으로 넣어주어야한다.) 다시 값을 재분배해준다.
'기록 > 수업정리_javascr' 카테고리의 다른 글
| svg (0) | 2024.08.14 |
|---|---|
| 객체 설명 (0) | 2024.08.12 |
| 연산자(증감, 논리) (0) | 2024.08.01 |
| scrollTo() (0) | 2024.07.31 |
| FixedNavigation, 상대좌표값, 절대좌표값 (0) | 2024.07.29 |
