Như ở bài trước thì ta đã tìm hiểu hàm nhóm Date Get trong JavaScript. Thì bài học hôm nay ta sẽ tìm hiểu về nhóm hàm Date Set trong JavaScript.

1. Hàm setDate() trong JavaScript

Hàm setDate() dùng để thiết lập lại ngày trong tháng của đối tượng ngày tháng. Nó có giá trị từ 1 – 31 .

  • Muốn thiết lập lại thành ngày 1, nhập đối số có là giá trị 1
  • Muốn thiết lập lại thành ngày 2, nhập đối số có là giá trị 2
  • …

Ví dụ:

<p id="demo"></p>

<script>
const d = new Date();
d.setDate(15);
document.getElementById("demo").innerHTML = d;
</script>

Hàm setDate() cũng có thể được sử dụng để thêm ngày đến một ngày. Ví dụ:

<p id="demo"></p>

<script>
const d = new Date();
d.setDate(d.getDate() + 50);
document.getElementById("demo").innerHTML = d;
</script>

2. Hàm setMonth trong JavaScript

Hàm setMonth() dùng để thiết lập lại tháng của đối tượng ngày tháng. Nó có giá trị từ 0 – 11 .

  • Muốn thiết lập lại thành tháng một, nhập đối số có là giá trị 0
  • Muốn thiết lập lại thành tháng hai, nhập đối số có là giá trị 1
  • Muốn thiết lập lại thành tháng ba, nhập đối số có là giá trị 2
  • …

Ví dụ:

<p id="demo"></p>

<script>
const d = new Date();
d.setMonth(11);
document.getElementById("demo").innerHTML = d;
</script>

3. Hàm setFullYear() trong JavaScript

Hàm setFullYear() dùng để thiết lập lại năm của đối tượng ngày tháng.

Ví dụ:

<p id="demo"></p>

<script>
const d = new Date();
d.setFullYear(2020);
document.getElementById("demo").innerHTML = d;
</script>

4. Hàm setHours() trong JavaScript

Hàm setHours() dùng để thiết lập lại giờ của đối tượng ngày tháng. Nó có giá trị từ 0 – 23 .

  • Muốn thiết lập lại thành 1 giờ, nhập đối số có là giá trị 1
  • Muốn thiết lập lại thành 2 giờ, nhập đối số có là giá trị 2
  • …

Ví dụ:

<p id="demo"></p>

<script>
const d = new Date();
d.setHours(22);
document.getElementById("demo").innerHTML = d;
</script>

5. Hàm setMinutes() trong JavaScript

Hàm setMinutes() dùng để thiết lập lại phút của đối tượng ngày tháng.

Ví dụ:

<p id="demo"></p>

<script>
const d = new Date();
d.setMinutes(30);
document.getElementById("demo").innerHTML = d;
</script>

6. Hàm setSeconds() trong JavaScript

Hàm setSeconds() dùng để thiết lập lại giây của đối tượng ngày tháng.

Ví dụ:

<p id="demo"></p>

<script>
const d = new Date();
d.setSeconds(30);
document.getElementById("demo").innerHTML = d;
</script>

7. Hàm setMilliseconds() trong JavaScript

Hàm setMilliseconds() dùng để thiết lập lại mili giây của đối tượng ngày tháng.

Ví dụ:

var date = new Date();
document.write("Mili giây của thời điểm ban đầu: " + date.getMilliseconds() + "<br>");
date.setMilliseconds(567);
document.write("Mili giây sau khi thiết lập lại: " + date.getMilliseconds());

Chú ý

Đây là chú ý chung cho tất cả hàm thuộc nhóm Date Set:

  • Vì đây là hàm set nên bạn phải truyền tham số vào.
  • Các hàm có ảnh hưởng lẫn nhau nhé các bạn, ví dụ bạn thiết lập ngày giờ không đúng thì nó sẽ lấy ngày giờ mặc định.
  • Nếu bạn dùng hàm setTime() để thiết lập thì nó ảnh hưởng tới tất cả các giá trị còn lại, bởi vì setTime() là hàm thiết lập thời gian đầy đủ đã chuyển sang dạng miniseconds .

8. So sánh ngày tháng

Ngày có thể dễ dàng được so sánh. Ví dụ sau so sánh ngày hôm nay với ngày 14 tháng 1 năm 2100:

<p id="demo"></p>

<script>
let text;
const today = new Date();
const someday = new Date();
someday.setFullYear(2100, 0, 14);

if (someday > today) {
  text = "Today is before January 14, 2100.";
} else {
  text = "Today is after January 14, 2100.";
}

document.getElementById("demo").innerHTML = text;
</script>

9. Tạo đồng hồ Online bằng hàm date trong JavaScript

Để các bạn hình dung rõ hơn và có thể hiểu hơn về đối tượng date, mình sẽ có một ví dụ nho nhỏ. Cùng với đó là giải trí một tý sau khi học lý thuyết nhiều và căng thẳng nhé.

Đầu tiên là một file index.html với nội dung sau:

<!DOCTYPE html>
<html>
    <head>
        <script>
          // Hàm khởi tạo đồng hồ
          function startTime()
          {
               
          }
           
          // Hàm này có tác dụng chuyển những số bé hơn 10 thành dạng 01, 02, 03, ...
          function checkTime(i)
          {
               
          }
        </script>
    </head>
    <body onload="startTime()">
 
        <div id="timer"></div>
 
    </body>
</html>

Trong đó :

  • một thẻ div#result dùng để hiển thị đồng hồ
  • onload=”startTime()” dùng để chạy đồng hồ khi website được load lên.
  • hàm startTime() dùng để tạo đồng hồ và hàm checkTime() dùng chuyển đổi định dạng những con số sang dạng 01, 02, 03, …

Hàm checkTime() :

// Hàm này có tác dụng chuyển những số bé hơn 10 thành dạng 01, 02, 03, ...
function checkTime(i) 
{
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

Hàm startTime() :

// Hàm khởi tạo đồng hồ
function startTime() 
{
    // Lấy Object ngày hiện tại
    var today = new Date();
 
    // Giờ, phút, giây hiện tại
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
 
    // Chuyển đổi sang dạng 01, 02, 03
    m = checkTime(m);
    s = checkTime(s);
 
    // Ghi ra trình duyệt
    document.getElementById('timer').innerHTML = h + ":" + m + ":" + s;
 
    // Dùng hàm setTimeout để thiết lập gọi lại 0.5 giây / lần
    var t = setTimeout(function() {
        startTime();
    }, 500);
}