'모듈' 태그의 글 목록 (5 Page)

'모듈'에 해당되는 글 43건

[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능

Posted at 2019. 5. 23. 19:44 | Posted in JavaScript & jQuery/JavaScript

해당 포스팅은 제작중인 사이트 에 추가하기 위해 제작한 샘플 들이다.

페이지 접속시 시간값을 선택하는 셀렉트 박스의 경우,

바로 다음 시간대를 선택해 주는 기능과, 지나간 시간의 선택을 방지하는 기능이다.

두개의 기능을 따로따로 분리한 다음에 마지막 내용에서 합친것이니

그냥 완성된 하나가 필요한 사람의 경우 맨아래 코드를 참고하면 된다.

■ 페이지 시작시 셀렉트 박스 시간 자동선택

홈페이지에서 당일 예약을 받는 경우,

예약 가능한 다음 타임을 자동으로 선택되게끔 해야한 경우가 있어 샘플로 만들어본 코드이다.

페이지 접속과 동시에 시간을 선택하는 옵션을 가진 셀렉트 박스의 리스트 중에서

선택 가능한 다음 시간을 자동으로 선택하는 기능을 수행한다.

<html>

<head>

<title>:: JavaScript 시간 자동 선택 ::</title>

document.addEventListener("DOMContentLoaded", function() {

const toDay = new Date();

const toYear = toDay.getFullYear().toString();

// getMonth()의 경우 0 ~ 11의 값을 출력하기에 기본적으로 항상 +1을 해서 한달을 더하지만

// 해당 예제에서는 그대로의 값을 필요로 하기에 +1을 하지 않는다.

// const toMonth = (toDay.getMonth() + 1).toString();

const toMonth = toDay.getMonth().toString();

const toDate = toDay.getDate().toString();

* 현재 시간(Hour)과 분(Minute)은 사용하지 않는다.

* const toHour = toDay.getHours().toString();

* const toMinute = toDay.getMinutes().toString();

const toSecond = toDay.getSeconds().toString();

lastTimeConstraint(toYear, toMonth, toDate, toSecond, function(lastDay) {

if(lastDay.getTime() > toDay.getTime()) {

// 선택 가능한 선택 옵션(시간)의 갯수를 구한다.

const timeCnt = document.getElementById("choiceTime").options.length;

// const timeCnt = document.getElementById("choiceTime").childElementCount;

const optTime = document.getElementById("choiceTime").children;

for(var num = 1; num <= timeCnt; num++) {

// 현재 옵션의값 value값을 추출한다.

var choTime = optTime[num].value;

var choHour = choTime.substring(0, 2);

var choMinute = choTime.substring(2, 4);

// 현재 년, 월, 일, 초의 값과 옵션의 시간, 분의 값을 날짜값으로 변경한다.

var optDay = new Date(toYear, toMonth, toDate, choHour, choMinute, toSecond);

if(optDay.getTime() > toDay.getTime()) {

document.getElementById("choiceTime").options[num].selected = true;

break;

}

else {

alert("금일 예약가능한 시간이 모두 지났습니다.\n내일 다시 예약하여 주시기 바랍니다.");

document.getElementById("choiceTime").options[0].selected = true;

return;

}

});

// 마지막 예약 가능 시간을 체크

function lastTimeConstraint(toYear, toMonth, toDate, toSecond, callBack) {

const lastTime = document.getElementById("choiceTime").lastElementChild.value;

const lastHour = lastTime.substring(0, 2);

const lastMinute = lastTime.substring(2, 4);

const lastDay = new Date(toYear, toMonth, toDate, lastHour, lastMinute, toSecond);

callBack(lastDay);

}

</script>

</head>

<body>

</select>

</body>

</html>

■ 셀렉트 박스 선택시 선택 가능 시간 확인

<html>

<head>

<title>:: RegExp.exec() 선택 ::</title>

function timeConstraint(optTime) {

const toDay = new Date();

const toYear = toDay.getFullYear().toString();

// getMonth()의 경우 0 ~ 11의 값을 출력하기에 기본적으로 항상 +1을 해서 한달을 더하지만

// 해당 예제에서는 그대로의 값을 필요로 하기에 +1을 하지 않는다.

// const toMonth = (toDay.getMonth() + 1).toString();

const toMonth = toDay.getMonth().toString();

const toDate = toDay.getDate().toString();

* 현재 시간(Hour)과 분(Minute)은 사용하지 않는다.

* const toHour = toDay.getHours().toString();

* const toMinute = toDay.getMinutes().toString();

const toSecond = toDay.getSeconds().toString();

lastTimeConstraint(toYear, toMonth, toDate, toSecond, function(lastDay) {

if(lastDay.getTime() > toDay.getTime()) {

const choHour = optTime.substring(0, 2);

const choMinute = optTime.substring(2, 4);

const optDay = new Date(toYear, toMonth, toDate, choHour, choMinute, toSecond);

if(optDay.getTime() < toDay.getTime()) {

alert("선택하신 시간은 경과하여\n예약을 진행 할 수 없습니다.");

document.getElementById("choiceTime").options[0].selected = true;

return;

} else {

alert("선택하신 시간으로\n예약이 진행됩니다.");

return;

}

else {

alert("금일 예약가능한 시간이 모두 지났습니다.\n내일 다시 예약하여 주시기 바랍니다.");

document.getElementById("choiceTime").options[0].selected = true;

return;

}

});

}

// 마지막 예약 가능 시간을 체크

function lastTimeConstraint(toYear, toMonth, toDate, toSecond, callBack) {

const lastTime = document.getElementById("choiceTime").lastElementChild.value;

const lastHour = lastTime.substring(0, 2);

const lastMinute = lastTime.substring(2, 4);

const lastDay = new Date(toYear, toMonth, toDate, lastHour, lastMinute, toSecond);

callBack(lastDay);

}

</script>

</head>

<body>

</select>

</body>

</html>

■ 시간 자동 선택 및 직접 선택시 선택가능 유무 확인

지금까지 페이지 접속시 자동 실행과

직접 선택시 해당 시간의 선택 가능 유무를 확인하는 코드를 구현해 보았다.

하지만 아마도 이렇게 선택해야 하는 경우.

위 두 코드를 따로 쓰는 경우는 별로 없을 것이다.

그래서 이제 위 두 코드를 합친 코드이고.

사실 이 포스팅을 작성하게 된 계기도 아래와 같은 기능을 구현하기 위함이었다.

# 소스 코드

<html>

<head>

<title>:: JavaScript 시간 자동 선택 ::</title>

document.addEventListener("DOMContentLoaded", function() {

// 자동 시간 선택 함수 실행

autoSelectTime();

});

// 자동 시간 선택 함수

function autoSelectTime() {

// 선택 가능한 선택 옵션(시간)의 갯수를 구한다.

const timeCnt = document.getElementById("choiceTime").options.length;

// const timeCnt = document.getElementById("choiceTime").childElementCount;

const optTime = document.getElementById("choiceTime").children;

for(var num = 1; num <= timeCnt; num++) {

var presence = timeConstraint(optTime[num].value, "auto");

if(presence == "success") {

document.getElementById("choiceTime").options[num].selected = true;

break;

} else if(presence == "unknown") {

break;

}

// 자동 시간 선택 함수

// optTime : 선택된 option의 value값

// motion : 자동 실행의 호출(auto)인지, 직접 선택한 경우의 호출(passive)인지의 구분

function timeConstraint(optTime, motion) {

const toDay = new Date(); // 현재 날짜

const toYear = toDay.getFullYear().toString(); // 현재 년도

// getMonth()의 경우 0 ~ 11의 값을 출력하기에 기본적으로 항상 +1을 해서 한달을 더하지만

// 해당 예제에서는 그대로의 값을 필요로 하기에 +1을 하지 않는다.

// const toMonth = (toDay.getMonth() + 1).toString();

const toMonth = toDay.getMonth().toString(); // 현재 월(자바스크립트의 특성상 지난 달)

const toDate = toDay.getDate().toString(); // 현재 일

* 현재 시간(Hour)과 분(Minute)은 사용하지 않는다.

* const toHour = toDay.getHours().toString();

* const toMinute = toDay.getMinutes().toString();

const toSecond = toDay.getSeconds().toString(); // 현재 초

const choHour = optTime.substring(0, 2); // 옵션의 시간

const choMinute = optTime.substring(2, 4); // 옵션의 분

// 셀렉트 박스의 옵션 값을 시간값으로 포맷한다.

const optDay = new Date(toYear, toMonth, toDate, choHour, choMinute, toSecond);

// 리턴할 값을 담을 변수 지정

let presence = "";

// 계속되는 반복 작업을 막기위해, 먼저 금일 마지막 시간이 이미 지났는지 여부를 확인한다.

lastOptionTime(toYear, toMonth, toDate, toSecond, function(lastDay) {

// 마지막 예약 시간이 지나지 않은경우

if(lastDay.getTime() > toDay.getTime()) {

const choHour = optTime.substring(0, 2);

const choMinute = optTime.substring(2, 4);

// 선택한 옵션의 시간값을 날자 값으로 포맷한다.

const optDay = new Date(toYear, toMonth, toDate, choHour, choMinute, toSecond);

// 현재시간이 옵션의 시간보다 큰경우

if(optDay.getTime() < toDay.getTime()) {

if(motion == "passive") {

alert("선택하신 시간은 경과하여\n예약을 진행 할 수 없습니다.");

// 사용자가 직접 시간을 선택하였으나 이미 시간이 경과한경우 예약 가능한 시간을 찾기위해

// autoSelectTime() 함수를 실행한다.

autoSelectTime();

}

presence = "failure";

}

// 사용가능 한 시간

else {

if(motion == "passive") {

alert("선택하신 시간으로\n예약이 진행됩니다.");

}

presence = "success";

}

// 마지막 시간이 지난 경우

else {

document.getElementById("choiceTime").options[0].selected = true;

alert("금일 예약가능한 시간이 모두 지났습니다.\n내일 날자로 예약하여 주시기 바랍니다.");

presence = "unknown";

}

});

return presence;

}

// 마지막 예약 가능 시간을 체크하는 함수

function lastOptionTime(toYear, toMonth, toDate, toSecond, callBack) {

// 마지막 option 엘리먼트의 value값을 가져온다.

const lastTime = document.getElementById("choiceTime").lastElementChild.value;

const lastHour = lastTime.substring(0, 2);

const lastMinute = lastTime.substring(2, 4);

// 마지막 option의 value값(시간)을 날자값으로 포맷한다.

const lastDay = new Date(toYear, toMonth, toDate, lastHour, lastMinute, toSecond);

callBack(lastDay);

}

</script>

</head>

<body>

</select>

</body>

</html>

# 출력 결과

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] AJAX 통신 정리 (0)	2019.11.17
[JavaScript] 스크립트로 QR코드 스캔하고 데이터 읽기 (43)	2019.06.13
[JavaScript] 정규 표현식을 사용한 데이터 변환 (0)	2019.04.16
[JavaSccript] 콤마(,)로 구분된 문자를 배열로 합치기 (0)	2019.02.24
[JavaScript] 배열의 값을 콤마(,)로 분리하기 (0)	2019.02.24

[JavaScrpt] 파일업로드시 확장자 검사하기[JavaScrpt] 파일업로드시 확장자 검사하기

Posted at 2019. 1. 23. 11:48 | Posted in JavaScript & jQuery/JavaScript

참고 : https://code.i-harness.com/ko-kr/q/409d5d

■ 이미지 파일 업로드시 확장자 검사하기

# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 특정 문자열 검색 ::</title>

function confirmFileExtension(file) {

console.log(file);

// 정규식을 사용히여 jpg, jpeg, png, gif, bmp등 이미지파일의 확장자를 가진것을 추려낸다.

var reg = /(.*?)\.(jpg|jpeg|png|gif|bmp)$/;

if(file.match(reg)) {

alert("해당 파일은 이미지 파일입니다.");

} else {

alert("해당 파일은 이미지 파일이 아닙니다.");

}

</script>

</head>

<body>

<br/>

</body>

</html>

# 출력 결과

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 배열의 값을 콤마(,)로 분리하기 (0)	2019.02.24
[JavaScript] GMT, 그리니치 표준시 구하기 (2)	2019.01.25
[JavaScript] 시간이 AM 혹은 PM인지 확인하기 (0)	2019.01.22
[JavaScript] 날짜 자동 포맷 함수 (0)	2019.01.11
[JavaScript] 더블 클릭 이벤트 방지 (0)	2018.12.29

[JavaScript] 시간이 AM 혹은 PM인지 확인하기[JavaScript] 시간이 AM 혹은 PM인지 확인하기

Posted at 2019. 1. 22. 16:00 | Posted in JavaScript & jQuery/JavaScript

참고 : https://electronic-moongchi.tistory.com/83

참고 : https://code.i-harness.com/ko-kr/q/87a0ab

■ 현재 시간이 오전인지 오후인지를 나타내는 함수

# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 날짜 출력 ::</title>

document.addEventListener("DOMContentLoaded", function() {

// 브라우저의 현재 날짜를 받아온다.

var toMeridiem = new Date();

document.getElementById("toMeridiem").value = toMeridiem.ampm();

});

// 현재 날짜값을 오전 or 오후 문자로 변환해주는 함수

Date.prototype.ampm = function() {

var hours = this.getHours() < 12 ? "오전" : "오후";

// var hours = this.getHours() < 12 ? "AM" : "PM";

return hours;

}

</script>

</head>

<body>

</body>

</html>

# 출력 결과

관련포스팅 : [JavaScript] 날짜 자동 포맷 함수

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] GMT, 그리니치 표준시 구하기 (2)	2019.01.25
[JavaScrpt] 파일업로드시 확장자 검사하기 (0)	2019.01.23
[JavaScript] 날짜 자동 포맷 함수 (0)	2019.01.11
[JavaScript] 더블 클릭 이벤트 방지 (0)	2018.12.29
[JavaScript] JavaScript 테스트 방식 (0)	2018.12.25

[JavaScript] 날짜 자동 포맷 함수[JavaScript] 날짜 자동 포맷 함수

Posted at 2019. 1. 11. 18:22 | Posted in JavaScript & jQuery/JavaScript

참고 : https://poiemaweb.com/js-date#13-new-datedatestring

웹 프론트 개발중에서는 항상 날짜를 특정한 형태의 포맷으로

화면에 나타내야 하는 경우가 잦다.

그때마다 Date() 함수등을 사용하여 정리하기는 너무 번거로운일이다.

아래 포스팅은 사용자 표현식 함수로 미리 날짜 포맷을 자동으로 맞춰주는 기능이다.

■ YYYY-MM-DD 형식으로 날짜 포맷하기

해당 코드는 기본 날짜값을 년 - 월 - 일 형식으로 바꿔준다.

# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 날짜 출력 ::</title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {

// 브라우저의 현재 날짜를 받아온다.

    var toDay = new Date();
    document.getElementById("toYmd").value = toDay.yyyymmdd();
});

// 현재 날짜값을 yyyy-mm-dd 형식으로 변환해주는 함수
  Date.prototype.yyyymmdd = function() {
      var yyyy = this.getFullYear().toString();
      var mm = (this.getMonth() + 1).toString();
      var dd = this.getDate().toString();
      return yyyy + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + (dd[1] ? dd : "0" + dd[0]);
}
</script>
</head>
<body>
    <h3>금일 날짜는(YYYY-MM-DD)?</h3>
    <input type="text" id="toYmd" style="text-align:center;"/>
</body>
</html>

# 출력 결과

■ HH:MM:SS 형식으로 시간 포맷하기

#01. 00시 ~ 24시 단위로 나타내기

해당 코드는 기본 날짜값을 시 : 분 : 초 형식으로 바꿔준다.

# 소스 코드

<html>
<head>
<title>:: JAVASCRIPT 시간 출력 ::</title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {

    // 브라우저의 현재 시간을 받아온다.
    var toTime = new Date();
    document.getElementById("toHms").value = toTime.hhmmss();
});

// 현재 시간값을 hh:mm:ss 형식으로 변환해주는 함수
  Date.prototype.hhmmss = function() {
      var hh = this.getHours().toString();
      var mm = this.getMinutes().toString();
      var ss = this.getSeconds().toString();
      return (hh[1] ? hh : "0" + hh[0]) + ":" + (mm[1] ? mm : "0" + mm[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
}
</script>
</head>
<body>
    <h3>현재 시간은(HH:MM:SS)?</h3>
    <input type="text" id="toHms" style="text-align:center;"/>
</body>
</html>

# 출력 결과

#02. AM, PM 12시간 단위로 나타내기

위에서 24시간 개념으로 시간을 출력하는것을 만들어 보았다면

이제 오전, 오후로 구분할 수 있는 12시간 개념으로 숫자를 표현해 보고자 한다.

# 소스 코드

  hh = hh.toString();
      var mm = this.getMinutes().toString();
      var ss = this.getSeconds().toString();
      return (hh[1] ? hh : "0" + hh[0]) + ":" + (mm[1] ? mm : "0" + mm[0]) + ":" + (ss[1] ? ss : "0" + ss[0]);
}
</script>
</head>
<body>
    <h3>현재 시간은(HH:MM:SS)?</h3>
    <input type="text" id="toHms" style="text-align:center;"/>
</body>
</html>

# 출력 결과

오전 or 오후, AM or PM을 표기하기 위한 함수는 따로 포스팅을 해두었다.

필요하다면 아래 링크를 참고하면 된다.

■ 문자형 YYYY-MM-DD HH:MM:SS 형식, DATE 형변환

위에서 YYYY-MM-DD, HH:MM:SS 형식으로 날짜값을 변환하여 출력할 수 있게 만들어 보았다.

그렇지만 개발이란게 꼭 이대로 끝나지 않고.

위와 같이 만든 형태를 다시 날짜형으로 변환 시켜주어야 하는 경우가 꼭 발생한다.

아래 코드를 이용하여 YYYY-MM-DD HH:MM:SS 혁식으로 된 날짜 값을 다시

자바스크립트의 날짜형으로 변환 시켜 보자.

# 소스 코드

<html>

<head>

<title>:: JAVASCRIPT 날짜 변환 ::</title>

document.addEventListener("DOMContentLoaded", function() {

// 강제로 YYYY-MM-DD HH:MM:SS 형식으로 날자값을 변수에 담는다.

var txtDate = "2019-02-14 11:24:32";

document.getElementById("convertTime").value = dateConvert(txtDate);

});

// 문자 YYYY-MM-DD HH:MM:SS값 날짜형으로 형변환

var dateConvert = function(date) {

const year = date.substring(0, 4);

const month = date.substring(5, 7);

const day = date.substring(8, 10);

const hour = date.substring(11, 13);

const minute = date.substring(14, 16);

const second = date.substring(17, 19);

const convert = year + "/" + month + "/" + day + " " + hour + ":" + minute + ":" + second;

return new Date( convert );

}

</script>

</head>

<body>

</body>

</html>

# 출력 결과

저작자표시

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScrpt] 파일업로드시 확장자 검사하기 (0)	2019.01.23
[JavaScript] 시간이 AM 혹은 PM인지 확인하기 (0)	2019.01.22
[JavaScript] 더블 클릭 이벤트 방지 (0)	2018.12.29
[JavaScript] JavaScript 테스트 방식 (0)	2018.12.25
[JavaScript] 자바스크립트에서의 Test Suite (0)	2018.12.25

Prev Next

1 2 3 4 5 6 7 8 ··· 11

'모듈'에 해당되는 글 43건

[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능[JavaScript] 셀렉트 박스의 시간 자동 비교 및 선택기능

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScrpt] 파일업로드시 확장자 검사하기[JavaScrpt] 파일업로드시 확장자 검사하기

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 시간이 AM 혹은 PM인지 확인하기[JavaScript] 시간이 AM 혹은 PM인지 확인하기

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

[JavaScript] 날짜 자동 포맷 함수[JavaScript] 날짜 자동 포맷 함수

'JavaScript & jQuery > JavaScript' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바