HTML, CSS 및 jQuery를 사용하여 반응형 시간 선택기를 만드는 방법-JS 튜토리얼-php.cn

HTML, CSS 및 jQuery를 사용하여 반응형 시간 선택기를 만드는 방법

王林

풀어 주다： 2023-10-26 11:27:13

원래의

1042명이 탐색했습니다.

HTML, CSS 및 jQuery를 사용하여 반응형 시간 선택기를 만드는 방법

현대 웹 디자인에서 반응형 디자인은 매우 중요한 요소가 되었습니다. 시간 선택기는 많은 웹사이트와 애플리케이션에서 필수적인 구성요소이기도 합니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 반응형 시간 선택기를 만드는 방법을 소개하고 참조용 특정 코드 예제를 제공합니다.

1단계: 기본 HTML 구조 만들기

먼저 시간 선택기를 수용할 기본 HTML 구조를 만들어야 합니다. 클래스 속성이 "timepicker"(시간 선택기)인

태그를 태그에 추가하고 텍스트 입력 상자와 아이콘 버튼을 설정할 수 있습니다. 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div class="timepicker">
    <input type="text" class="time-input" readonly>
    <i class="fas fa-clock"></i>
  </div>
</body>

</html>

로그인 후 복사

2단계: CSS 스타일 만들기

다음으로 이 시간 선택기에 몇 가지 기본 CSS 스타일을 추가하여 더 아름답고 사용하기 쉽게 만들어야 합니다. 아래 코드 예제를 참조할 수 있습니다.

.timepicker {
  position: relative;
  display: inline-block;
}

.time-input {
  padding: 6px 12px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.fa-clock {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: #666;
}

로그인 후 복사

3단계: jQuery 이벤트 추가

이제 jQuery를 사용하여 시간 선택기의 대화형 기능을 처리해야 합니다. 먼저 JavaScript 파일(script.js)에 다음 코드를 추가합니다.

$(function() {
  $('.timepicker').on('click', function() {
    $('.time-input').focus();
  });
  
  $('.time-input').on('focus', function() {
    $(this).attr('type', 'time');
  });
  
  $('.time-input').on('blur', function() {
    $(this).attr('type', 'text');
  });
});

로그인 후 복사

위 코드에서는 jQuery를 사용하여 시간 선택기의 클릭 이벤트를 수신하고 텍스트 입력 상자에 포커스를 둡니다. 텍스트 입력 상자에 포커스가 생기면 사용자가 시간 선택기를 사용하여 시간을 선택할 수 있도록 해당 유형을 "시간"으로 변경합니다. 텍스트 입력 상자가 포커스를 잃으면 해당 유형을 다시 "텍스트"로 변경합니다.

4단계: FontAwesome 아이콘 라이브러리 추가

시간 선택기를 더 아름답게 보이게 하려면 FontAwesome 아이콘 라이브러리를 사용할 수 있습니다. HTML 파일의 태그에 다음 코드를 추가하기만 하면 됩니다.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

로그인 후 복사

이제 간단한 반응형 시간 선택기 생성이 완료되었습니다. 사용자는 시간 입력 상자를 클릭하여 시간 선택창을 팝업으로 띄우고 원하는 시간을 선택할 수 있습니다. 선택한 시간이 시간 입력창에 표시됩니다.

또한 시간 선택기의 기능과 스타일을 더욱 향상시키려면 CSS 스타일과 jQuery 이벤트를 직접 수정할 수 있습니다.

요약:

이 글에서는 HTML, CSS, jQuery를 사용하여 간단한 반응형 시간 선택기를 만드는 방법을 소개합니다. 기본 HTML 구조, CSS 스타일, jQuery 이벤트를 추가하여 사용자 친화적인 시간 선택기를 구현할 수 있습니다. 이 글이 반응형 시간 선택기를 이해하고 만드는 데 도움이 되기를 바랍니다.

위 내용은 HTML, CSS 및 jQuery를 사용하여 반응형 시간 선택기를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!