나만의 jQuery 디지털 시계를 만듭니다

이 튜토리얼은 jQuery를 사용하여 웹 페이지에 디지털 시계를 표시하는 간단하면서도 효과적인 방법을 보여줍니다. 시계는 매 초마다 동적으로 업데이트되어 지속적으로 새로 고침 된 시간 디스플레이를 제공합니다. jQuery 코드는 다음과 같습니다

이 코드 스 니펫은 현재 시간을 가져오고, 적절하게 형식화하고 (AM/PM 지정 포함), HTML 요소를 ID "Clock"으로 매 초마다 업데이트합니다.

자주 묻는 질문 및 사용자 정의 옵션 :

이 섹션은 일반적인 질문을 해결하고 jQuery 디지털 시계를 사용자 정의하기위한 솔루션을 제공합니다. 모양 사용자 정의 (CSS) :

CSS를 사용하여 시계의 모양을 쉽게 사용자 정의 할 수 있습니다. 예를 들어 색상을 파란색으로 변경하고 글꼴 크기를 24 픽셀로 변경합니다.

function updateClock() {
    var currentTime = new Date();
    var currentHours = currentTime.getHours();
    var currentMinutes = currentTime.getMinutes();
    var currentSeconds = currentTime.getSeconds();

    currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
    currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;
    var timeOfDay = (currentHours < 12) ? "AM" : "PM";
    currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;
    currentHours = (currentHours === 0) ? 12 : currentHours;

    var currentTimeString = currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay;

    $("#clock").html(currentTimeString);
}

$(document).ready(function() {
    setInterval(updateClock, 1000);
});

날짜 추가 : 날짜를 통합하려면 기능 내에서 다음 JavaScript를 사용하십시오.

html에

요소를 추가하는 것을 잊지 마십시오

12 시간 vs. 24 시간 형식 : 제공된 코드는 이미 12 시간 형식을 처리합니다. 24 시간 형식의 경우 변수를 제거하고 그에 따라 로직을 조정합니다. 사운드, 시간대 및 고급 기능 추가 : 사운드 추가 (HTML5

위 내용은 나만의 jQuery 디지털 시계를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!