Techmaster - Học là có việc

|

Tham khảo khóa học mới nhất🔥🔥

Ánh Văn Hóa Blog

Lấy ngày giờ hiện tại bằng javascript

Phát hành: 3/3/2023

Lấy ngày giờ hiện tại bằng javascript

Bạn đang muốn lấy ngày giờ hiện tại bằng javascript mà chưa biết cách làm? Vậy bài viết này là dành cho bạn đấy. Nay mình sẽ hướng đẫn chi tiết cách lấy được ngày giờ hiện tại bằng javascript và làm một chiếc đồng hồ số bằng Javascript.

Để lấy được ngày giờ hiện tại thì trước tiên bạn cần khởi tạo một đối tượng Date trong javascript

const time = new Date();

Vì đây là một đối tượng nên cần sử dụng từ khóa new. Bây giờ bạn chỉ cần log ra là chũng ta có thể thấy được ngày giờ hiện tại rồi nhưng bài viết này chưa kết thúc cho bạn nào muốn lấy riêng ngày, tháng, thứ và năm.

Lấy giờ bằng phương thức getHour()

Muốn có được giờ hiện tại thì mình sẽ dùng phương thức getHour() phương thức này sẽ trả về số giờ dạng 24h (0-23).

const getHour = time.getHours();

Nếu các bạn muốn lấy thêm số 0 đằng trước cho các giờ chỉ có một chữ số như 1, 2, 3… thành 01, 02, 03 thì các bạn có thể dùng phương thức padStart().

const getHour = `${time.getHours()}`.padStart(2, '0');

Lấy phút bằng phương thức getMinutes()

Tương tự như lấy giờ chỉ khác mình sẽ dùng phương thức getMinutes() phương thức này sẽ trả về phút trong giờ (0-59).

const getMinute = time.getMinutes();

Bạn cũng muốn thêm số 0 đằng trước thì vẫn có thể dùng các trên tương tự nhé.

const getMinute = `${time.getMinutes()}`.padStart(2, '0');

Lấy giây bằng phương thức getSeconds()

Với giây mình sẽ sử dụng phương thức getSeconds() nó trả về số giây trong phút (0-59).

const getDay = time.getDay();

Bạn vẫn có thể dụng các trên để thêm số 0 đằng trước nhé.

const getSecond = `${time.getSeconds()}`.padStart(2, '0');

Lấy thứ bằng phương thức getDay()

Lấy thừ thì mình sẽ sử dụng phương thức getDay() phương thức này trả về các ngày trong tuần (0-6) với 0 sẽ là thứ 2 và 6 sẽ tương ứng với chủ nhật nhé.

const getDay = time.getDay();

Nhưng có bạn sẽ muốn kiểu lấy như là thứ hai, thứ ba… đúng không. Vậy thì bạn có thể thử các này nhé, trước tiên bạn hay tạo cho mình một array trong array chứa các thứ, do phương thức “getDay()” trả về (0-6) bạn có thể lấy đó làm index để lấy ra được phần tử trong array.

const listDay = [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday'
];
const getDay = listDay[time.getDay()];

Lấy ngày bằng phương thức getDate()

Phương thức getDate() sẽ trả về các ngày trong tháng (1-31).

Lấy tháng bằng phương thức getMonth()

Phương thức getMonth() sẽ lấy được tháng, nó sẽ trả về các tháng trong năm (0-11).

const getMonth = time.getMonth();

Các bạn cũn có thể dùng các tương tương như lấy thức để lấy ra tháng bằng chữ nhé.

const listMonth = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];
const getMonth = listMonth[time.getMonth()];

Lấy năm bằng phương thức getFullYear()

Lấy năm thì sử dụng phương thức getFullYear() với hàm này sẽ trả về đầy đủ năm theo dạng YYYY.

const fullYear = time.getFullYear();

Mình đã lược qua các hàm lấy được giờ, phút, giây, này tháng, năm hiện tại rồi, vậy nên mĩnh sẽ áp nó để tạo ra một chiếc đồng hồ số, các bạn có thể tham khảo nhé. source mình để ở dưới trang web.

Tạo đồng hồ số bằng javascript

Phần HTML liên quan đến css mình để cho các bạn tham khảo.

<body>
    <div class="root">
        <div class="box-time">
            <div class="box-1">
                <div class="item-box-1 hours">00</div>
                <div class="item-box-1 minute">00</div>
                <div class="item-box-1 second">00</div>
            </div>
            <div class="box-2">
                <div class="item-box-2 month">Mar</div>
                ,
                <div class="item-box-2 day">Sunday</div>
                <div class="item-box-2 date">6</div>
            </div>
        </div>
    </div>
</body>

Đây là phần css nếu bạn muốn có một giao diện đồng hồ giống mình.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
 
html {
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}
 
body {
    color: #ffe5d9;
    background-color: #1c1a25;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
 
.root {
    position: relative;
    width: 45%;
    padding: 80px 50px;
    background-color: #1a1824;
    border-radius: 25px;
}
 
.root::after {
    position: absolute;
    content: '';
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: linear-gradient(
        to right top,
        #ff68ac,
        #fb76c8,
        #ff20c7,
        #d810c8,
        #8800a2,
        #712db5,
        #5042c4,
        #0052d0,
        #0074e3,
        #0093ec,
        #00afef,
        #4cc9f0
    );
    filter: blur(80px) saturate(4);
    animation: identifier 2s ease-in infinite alternate;
}
 
@keyframes identifier {
    100% {
        filter: blur(180px);
    }
}
 
.box-1 {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
 
.box-2 {
    display: flex;
    justify-content: center;
    font-size: 2.2rem;
    color: #f4f8ff;
}
 
.item-box-1 {
    font-size: 12rem;
    background-image: linear-gradient(
        to bottom left,
        #ff68ac,
        #fb76c8,
        #ff20c7,
        #d810c8,
        #8800a2,
        #712db5,
        #5042c4,
        #0052d0,
        #0074e3,
        #0093ec,
        #00afef,
        #4cc9f0
    );
    color: transparent;
    -webkit-background-clip: text;
    filter: saturate(2);
}
.item-box-2 {
    padding: 0 5px;
}
.minute {
    position: relative;
}
.minute::after {
    position: absolute;
    content: ':';
    left: -40px;
    font-size: 8rem;
    z-index: 1;
    color: #a4a4a4;
    top: 45%;
    transform: translateY(-50%);
}
 
.minute::before {
    position: absolute;
    content: ':';
    right: -40px;
    font-size: 8rem;
    z-index: 1;
    color: #a4a4a4;
    top: 45%;
    transform: translateY(-50%);
}

Phần Javascript mình có dùng setInterval để đoạn code sẽ tự chạy sau 500 miliseconde nhé, còn mọi thứ sẽ hoạt động như trên mình đã nói.

const hours = document.querySelector('.hours');
const minute = document.querySelector('.minute');
const second = document.querySelector('.second');
const month = document.querySelector('.month');
const day = document.querySelector('.day');
const date = document.querySelector('.date');
const listMonth = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];
const listDay = [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday',
    'Sunday'
];
setInterval(() => {
    const Day = new Date();
    const getHour = `${Day.getHours()}`.padStart(2, '0');
    const getMinute = `${Day.getMinutes()}`.padStart(2, '0');
    const getSecond = `${Day.getSeconds()}`.padStart(2, '0');
    hours.innerText = getHour;
    minute.innerText = getMinute;
    second.innerText = getSecond;
    month.innerText = listMonth[Day.getMonth()];
    day.innerText = listDay[Day.getDay()];
    date.innerText = Day.getDate();
}, 500);

Sau khi copy và chạy nó bạn sẽ nhận được một giao diện đồng hồ số hoàn chỉnh và thẩm mĩ nhé.

đồng hồ bằng javascipt

Phần kết

Tất cả nhưng phương thức trên sẽ giúp bạn lấy được ngày giờ hiện tại và cụ thể cho bạn dễ dàng tạo ra một chiếc đồng hồ rồi. Việc của bạn bây giờ là tự thực hành và tạo ra một chiếc đồng hồ cho riêng mình.

Chúc các bạn thành công !

Cảm ơn bạn ghé thăm

Có thể bạn sẽ thích