Viết chương trình hiển thị đồng hồ trong Javascript


Để hiển thị đồng hồ thì ta sẽ phải lấy được thời gian và hiện liên tục 1 giây 1 lần, ta có thể làm như sau:

setInterval(function(){
 var today = new Date();
 console.log(today);
},1000);

setInterval(...) sẽ gọi hàm trên 1 giây gọi 1 lần. 1000 micro giây là 1 giây.

Nếu ta muốn việt hoá thông tin thời gian in ra ví dụ như :

"Hôm nay là Thứ Ba, Tháng Mười Hai, 17/12/2019 ,08:42:10"

Đầu tiên ta sẽ lấy ra ngày = 17, tháng= 12, năm = 2019, giờ = 08, phút= 42, giây=10.

var getDate = today.getDate(); // 17
var getMonth = today.getMonth(); // hàm getMonth() trả về 11 

today.getFullYear(); // 2019
today.getHours(); // 08
today.getMinutes(); // 42
today.getSeconds(); // 10

Còn "Thứ Ba" và "Tháng Mười Hai" thì làm sau:

  var getMonth = today.getMonth(); // 11 , return  0 --> 11
  var getDay = today.getDay(); // 2 , return 0 --> 6

  let months = ['Một', 'Hai','Ba', 'Tư','Năm', 'Sáu', 'Bảy', 'Tám','Chín','Mười', 'Mười một', 'Mười Hai']; 
  console.log(months[getMonth]); // Mười Hai 

  let dayOfWeek = ['Chủ Nhật', 'Thứ Hai', 'Thứ Ba','Thứ Tư' , 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'];
  console.log(dayOfWeek[getDay]); // Thứ Ba

Để in ra đồng hồ ta dùng string template


var time = `Hôm nay là ${dayOfWeek[getDay]}, tháng ${months[getMonth]}, ${getDate}}/${getMonth+1}//${getYear} , ${getHour}:${getMinute}:${getSecond}`;
console.log(time);// Hôm nay là Thứ Ba, tháng Mười Hai, 17/12/2019 ,08:42:10

Chương trình hiển thị đồng hồ của chúng ta như sau:

setInterval(function(){
  var today = new Date();
  var getMonth = today.getMonth();
 
  let months = ['Một', 'Hai','Ba', 'Tư','Năm', 'Sáu', 'Bảy', 'Tám','Chín','Mười', 'Mười một', 'Mười Hai']; 
  console.log(months[getMonth]); // Mười Hai 

  let dayOfWeek = ['Chủ Nhật', 'Thứ Hai', 'Thứ Ba','Thứ Tư' , 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'];
  console.log(dayOfWeek[getDay]); // Thứ Ba
 
  
  var getYear = today.getFullYear();
  var getDate = today.getDate();
  var getDay = today.getDay();
  var getHour = today.getHours();
  var getMinute = today.getMinutes();
  var getSecond = today.getSeconds();

  var time = `Hôm nay là  ${dayOfWeek[getDay]}, tháng ${months[getMonth]}, ${getDate}/${getMonth+1}/${getYear} ,${getHour}:${getMinute}:${getSecond}`;
  console.log(time);
},1000);

Như vậy là ta đã viết được chương trình hiển thị thời gian trên web rồi đó. Đơn giản phải không nào ^_^.