○ 오픈소스 인기 순위
○ moment.js
- 자바스크립트의 내장객체 Date()의 복잡성을 단순, 다양하게 사용하기 위한 자바스크립트 기반 오픈소스
- 다운로드 링크 : https://momentjs.com
- moment-with-locales.js 다운로드 (우클릭>다른 이름으로 링크 저장)
- <head>에 다운받은 moment.js파일 import 후 사용
<head>
<meta charset="UTF-8">
<title>moment</title>
<script src="jquery-3.6.0.min.js"></script>
<!-- moment 오픈소스 import -->
<script src="moment-with-locales.js"></script>
</head>
<body>
<h3>moment.js 오픈소스</h3>
<h1 id="time"></h1>
<script>
var now=moment();
alert(now); //Tue Jun 07 2022 21:21:06 GMT+0900
alert(now.year()); //2022
alert(now.month()); //5(현재달-1)
alert(now.date()); //7
moment.locale("ko"); //한글 날짜 형식으로 지정
var fullDate=now.format("YYYY년MM월DD일 HH시mm분ss초"); //HH:24시간제, hh:12시간제
$("#time").text(fullDate);
</script>
</body>
○ 날짜 데이터 자동 생성
- 예) 회원가입 시 생년월일 입력하는 드랍다운 목록
<body>
<h3>날짜 데이터 자동 생성</h3>
생년월일 :
<select id="myYear"></select>년
<select id="myMonth"></select>월
<select id="myDate"></select>일
<script>
createYearMonth(); //최초로 함수 한번만 호출
//년, 월 생성하기
function createYearMonth(){
//1) 1월~12월 생성후 추가
for(m=1; m<=12; m++){
$("#myMonth").append($("<option>").text(m)); //부모.append(자식)
}//for end
//2) 현재년도 -5년 ~ 현재년도 +5년까지 출력
var cYear=moment().year(); //현재년도 2022
for(y=cYear-5; y<=cYear+5; y++){
//3) 현재년도를 미리 selected
if(cYear==y){
$("<option>").text(y).attr("selected", "selected").appendTo("#myYear");
}else{
$("<option>").text(y).appendTo("#myYear");
}//if end
}//for end
//4) '일' 생성하는 함수 호출
createDate();
}//createYearMonth() end
//일 생성하기
function createDate(){
//10) 기존의 '일' 출력된 값을 지우기
$("#myDate").empty();
//5) id=myYear에서 사용자가 선택한 년 가져오기
var year=$("#myYear").val();
//6) id=myMonth에서 사용자가 선택한 월 가져오기
var month=$("#myMonth").val();
//7) endOf() : 해당년도와 해당월의 마지막 일을 얻어오는 함수
var endDay=moment(year+"-"+month).endOf("month").date();
//8) '일' 추가
for(d=1; d<=endDay; d++){
$("<option>").text(d).appendTo("#myDate");
}
}//createDate() end
//9) 사용자가 년, 월을 변경했을 때 (change이벤트 발생)
// '일'을 생성하는 함수 createDate호출
$("#myYear, #myMonth").change(createDate);
</script>
</body>
○ 아날로그 시계 만들기
- 참고 (시간 1=0.001초)
① setTimeout() : 일정한 시간 후에 작업을 한번 실행 (특정시간이후 한 번 실행)
setTimeout('함수', 특정시간)
② setInterval() : 일정시간 간격으로 계속 특정 작업을 수행하고자 할 때 사용 (특정시간마다 계속 실행)
setInterval('함수', 특정시간)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Analog Clock</title>
<script src="jquery-3.6.0.min.js"></script>
<script src="moment-with-locales.js"></script>
<style>
#wrapper{
width: 600px;
height: 600px;
}
#wrapper h3 {
height:80px;
font-size:50px;
text-align: center;
font-weight: bold;
color: #585858;
}
#clockface {
position: relative;
background-size: 500px 500px;
width: 500px;
height: 500px;
margin: auto;
background-size: 100% 100%;
background-image: url(../image/simple_clockface.png);
}
#hourHand { background-image: url(../image/simple_clockHour.png)}
#minHand { background-image: url(../image/simple_clockMin.png)}
#secHand { background-image: url(../image/simple_clockSec.png)}
.clock{
width: 500px;
height: 500px;
position: absolute;
background-size: 100% 100%;
margin: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<h3>CLOCK</h3>
<div id="clockface">
<div id="hourHand" class="clock"></div>
<div id="minHand" class="clock"></div>
<div id="secHand" class="clock"></div>
</div>
</div>
<script>
function currentTime(){
var time=moment();
var hourDg=time.hour()*30+time.minute()*0.5;
var minDg=time.minute()*6;
var secDg=time.second()*6;
$("#hourHand").css("transform", "rotate("+hourDg+"deg)");
$("#minHand").css("transform", "rotate("+minDg+"deg)");
$("#secHand").css("transform", "rotate("+secDg+"deg)");
}//currentTime() end
currentTime();
setInterval(currentTime, 1000);
</script>
</body>
</html>
'Frontend > jQuery' 카테고리의 다른 글
| 07. jQuery, 요소 생성 (append, prepend) (0) | 2022.06.07 |
|---|---|
| 06. jQuery, this & index (0) | 2022.06.07 |
| 05. jQuery, each반복문 (0) | 2022.06.07 |
| 04. jQuery, css() 함수 / prop()와 attr() 함수 (0) | 2022.06.03 |
| 03. jQuery, text()와 html() 함수 / jQuery Method Chaining (0) | 2022.06.03 |
댓글