[JQuery] countdown

view

<div>
	<input type="date" id="inputDate" value="2023-06-05">
    <input type="time" id="inputTime" value="18:00:00">
    <h3>퇴근까지 </h3>
    <div id="timer">
        <div id="days" style="display: inline-block; padding: 20px;"></div>
        <div id="hours" style="display: inline-block; padding: 20px;"></div>
        <div id="minutes" style="display: inline-block; padding: 20px;"></div>
        <div id="seconds" style="display: inline-block; padding: 20px;"></div>
    </div>
</div>

js

$(document).ready(function(){
    function makeTimer() {
        let dDay = $('#inputDate').val();
        let dTime = $('#inputTime').val();

        var endTime = new Date(dDay+" "+dTime);
        endTime = (Date.parse(endTime) / 1000);

        var now = new Date();
        now = (Date.parse(now) / 1000);

        var timeLeft = endTime - now;

        var days = Math.floor(timeLeft / 86400);
        var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
        var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
        var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));

        if (hours < "10") { hours = "0" + hours; }
        if (minutes < "10") { minutes = "0" + minutes; }
        if (seconds < "10") { seconds = "0" + seconds; }

        $("#days").html(days + "<span>Days</span>");
        $("#hours").html(hours + "<span>Hours</span>");
        $("#minutes").html(minutes + "<span>Minutes</span>");
        $("#seconds").html(seconds + "<span>Seconds</span>");

    }
    setInterval(function() { makeTimer(); }, 1000);

});

 

 

 

아름다운 출처

https://codepen.io/piotrswioklo/pen/AGNdoq