Cập nhật lần cuối vào ngày 19 tháng 8 năm 2022 21:50:49 (UTC/GMT +8 giờ)Đối tượng JavaScript: Bài tập-8 với giải phápViết một chương trình JavaScript để tạo đồng hồ. Lưu ý: Đầu ra sẽ đến mỗi giây. Đầu ra bảng điều khiển dự kiến: "14:37:42" "14:37:43" "14:37:44" "14:37:45" "14:37:46" "14:37:47"
Note: The output will come every second.
Expected Console Output:
"14:37:42"
"14:37:43"
"14:37:44"
"14:37:45"
"14:37:46"
"14:37:47" Giải pháp mẫu: - - Mã HTML: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create a clock and display the time in each second </title>
</head>
<body>
</body>
</html>
Mã JavaScript: function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
Đầu ra mẫu: 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
Sơ đồ: Bản thử trực tiếp: Xem PEN JavaScript-Enscise-8 của W3Resource (@W3Resource) trên CodePen. Cải thiện giải pháp mẫu này và đăng mã của bạn thông qua Disqus Trước đây: Viết chương trình JavaScript trả về một tập hợp con của chuỗi. Write a JavaScript program which returns a subset of a string.
Next: Write a JavaScript program to calculate the area and perimeter of a circle. Mức độ khó của bài tập này là gì?
Kiểm tra kỹ năng lập trình của bạn với bài kiểm tra của W3Resource. JavaScript: Lời khuyên trong ngàyPhương thức đối tượng.Seal () const person = { name: 'Lydia Hallie' };
Object.seal(person);
Với Object.Seal, chúng ta có thể ngăn chặn các hoạt động mới được thêm vào hoặc các thuộc tính hiện có sẽ được gỡ bỏ. Tuy nhiên, bạn vẫn có thể sửa đổi giá trị của các thuộc tính hiện có.
However, you can still modify the value of existing properties. Tham khảo: https://bit.ly/2hcpkm6
- Bài tập: Top 16 chủ đề phổ biến nhất hàng tuần
- Bài tập SQL, Thực hành, Giải pháp - Tham gia
- Bài tập SQL, Thực hành, Giải pháp - Quan sát phụ
- JavaScript Basic - Bài tập, Thực hành, Giải pháp
- Java Array: Bài tập, Thực hành, Giải pháp
- C Bài tập lập trình, Thực hành, Giải pháp: Tuyên bố có điều kiện
- Cơ sở dữ liệu nhân sự - Sắp xếp bộ lọc: Bài tập, Thực hành, Giải pháp
- C Bài tập lập trình, Thực hành, Giải pháp: Chuỗi
- Các loại dữ liệu Python: Từ điển - Bài tập, Thực hành, Giải pháp
- Câu đố lập trình Python - Bài tập, Thực hành, Giải pháp
- Mảng C ++: Bài tập, Thực hành, Giải pháp
- Báo cáo và vòng lặp có điều kiện JavaScript - Bài tập, Thực hành, Giải pháp
- Thuật toán cơ bản C# Sharp: Bài tập, Thực hành, Giải pháp
- Python Lambda - Bài tập, Thực hành, Giải pháp
- Python Pandas DataFrame: Bài tập, Thực hành, Giải pháp
- Công cụ chuyển đổi
- JavaScript: HTML Mẫu xác thực
Trong bài viết này, chúng tôi xem xét cách bạn có thể triển khai đồng hồ thời gian thực trong JavaScript. Chúng tôi phá vỡ và giải thích mã để bạn có thể sao chép nó một cách dễ dàng. Tuy nhiên, trong trường hợp bạn là một lập trình viên dày dạn và chỉ ở đây cho mã, bạn có thể đi thẳng vào các giải pháp. Trong trường hợp bạn aren, tôi khuyên bạn nên làm theo từng bước.
Mục lục- Tổng quan về đồng hồ JavaScript
- Đồng hồ 12 giờ bằng JavaScript
- Đồng hồ 24 giờ bằng JavaScript
Tổng quan về đồng hồ JavaScript:Đồng hồ là vô cùng quan trọng trên các trang web nơi thời gian đóng một yếu tố lớn, ví dụ: đặt trang web, thương mại điện tử, v.v. Tuy nhiên, với các hỗ trợ của JavaScript và cho phép chúng tôi thao túng các trang web trong thời gian thực, các đồng hồ xây dựng cho thấy thời gian hiện tại trong JavaScript đã trở nên khá đơn giản. Lưu ý: Trong bài viết này, chúng tôi xem xét kỹ mã JavaScript đằng sau một chiếc đồng hồ. Chúng tôi không nói về kiểu dáng CSS vì có rất nhiều blog đã có sẵn ngắn gọn về nó. Chúng tôi khá tập trung phần lớn vào mã JavaScript. In this article, we look closely at the JavaScript code behind a clock. We do not talk about CSS styling as there are plenty of blogs already available that brief about it. We rather focus largely on the JavaScript code. Đồng hồ 12 giờ bằng JavaScriptNhư tên cho thấy, trong phần này, chúng tôi xem xét cách xây dựng đồng hồ JavaScript 12 giờ. Mã đồng hồ JavaScript (12 giờ):function currentTime() {
let date = new Date();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
let session = "AM";
if(hh == 0){
hh = 12;
}
if(hh > 12){
hh = hh - 12;
session = "PM";
}
hh = (hh < 10) ? "0" + hh : hh;
mm = (mm < 10) ? "0" + mm : mm;
ss = (ss < 10) ? "0" + ss : ss;
let time = hh + ":" + mm + ":" + ss + " " + session;
document.getElementById("clock").innerText = time;
let t = setTimeout(function(){ currentTime() }, 1000);
}
currentTime();
Xem bút KKWPJOR của Ancil Eric (@ancileric) trên Codepen. Explanation:Mã trên có vẻ đáng sợ lúc đầu, nhưng nó khá đơn giản khi bạn phá vỡ nó. Chúng tôi bắt đầu mã bằng cách xác định hàm, function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
7. Bên trong chức năng, chúng tôi lưu trữ thời gian hiện tại trong một biến gọi là ngày.Chúng tôi làm điều đó bằng cách sử dụng hàm tạo function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
8, hàm tạo này trả về ngày trình duyệt cùng với múi giờ.Lưu ý: Đối tượng ngày là tĩnh, chúng tôi sẽ phải tiếp tục cập nhật nó, chúng tôi sẽ làm điều đó sau trong mã. The date object is static, we
would have to keep updating it, we do that later in the code. let date = new Date();
Khi điều này được thực hiện, chúng tôi trích xuất giờ, phút và giây từ biến (ngày) bằng các phương thức function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
9, 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
0 và 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
1.Các phương thức này trả về các giá trị tương ứng khi một ngày được thông qua, chúng tôi lưu trữ chúng theo các biến khác nhau. Cuối cùng, chúng tôi sử dụng một biến gọi là 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
2 để lưu trữ thẻ AM hoặc PM.let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
let session = "AM";
Lưu ý: Dưới đây là ngày trong 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
3, v.v., là biến chúng tôi đã sử dụng để lưu trữ ngày hiện tại trước đó.: Here date in 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
3, etc, is the variable we used to store the current
date earlier.Phương thức ngày if(hh == 0){
hh = 12;
}
Và, chúng tôi sử dụng một cách khác nếu trừ giờ lớn hơn 12 và để gán giá trị của biến phiên cho các pm pm. if(hh > 12){
hh = hh - 12;
session = "PM";
}
Để hiểu bit mã tiếp theo, bạn cần phải làm quen với hai khái niệm. Thứ nhất, các phương thức function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
9, 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
0 và 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
1 trả về các giá trị từ 0 đến 23, 59, 59 tương ứng. Điểm quan trọng ở đây là các giá trị chữ số đơn được trả về dưới dạng # (ví dụ: 7), tuy nhiên, trong đồng hồ của chúng tôi, các giá trị này cần được hiển thị là ## (ví dụ: 07).Và để đạt được điều này, chúng tôi sử dụng các nhà khai thác ternary. Toán tử này trả về một giá trị nếu điều kiện là đúng và một giá trị khác nếu nó là sai. Tôi đã thêm cú pháp dưới đây. (condition ? if true : if false);
Sử dụng toán tử này, chúng tôi giải quyết vấn đề trên bằng cách thêm 0 trước chữ số nhỏ hơn 10. function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
0Tiếp theo, chúng tôi tạo một thời gian thay đổi để lưu trữ thời gian ở định dạng mong muốn. function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
1Để hiển thị thời gian chúng tôi sử dụng mã sau. function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
2Ở đây, tài liệu đại diện cho trang web, 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
7 trả về phần tử có ID đã được truyền dưới dạng tham số trong trường hợp của chúng tôi. Và thuộc tính bên trong đặt bối cảnh của nút theo thời gian.Và cuối cùng, phần quan trọng nhất, hãy nhớ rằng tôi đã đề cập rằng 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
8 trả về giá trị tĩnh. Chúng tôi sử dụng phương thức 14:45:52
14:45:53
14:45:54
14:45:55
14:45:56
14:45:57
14:45:58
14:45:59
14:46:0
-----
9 để cập nhật nó. Tôi đã thêm cú pháp cho nó dưới đây.function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
3Phương pháp này gọi hoặc chạy một hàm sau một số mili giây được chỉ định. Lưu ý: 1000ms = 1 giây. Chúng tôi sử dụng phương pháp này để cập nhật mã mỗi giây, để giữ cho đồng hồ của chúng tôi chạy. function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
4Và tất cả những gì còn lại là để chạy chức năng. function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
5Đồng hồ 24 giờ - Mã & Giải thíchMã cho đồng hồ 24 giờ khá giống với mã trước đó, chúng tôi chỉ có một thay đổi lớn. Mã đồng hồ JavaScript (24 giờ):function my_Clock()
{
this.cur_date = new Date();
this.hours = this.cur_date.getHours();
this.minutes = this.cur_date.getMinutes();
this.seconds = this.cur_date.getSeconds();
}
my_Clock.prototype.run = function ()
{
setInterval(this.update.bind(this), 1000);
};
my_Clock.prototype.update = function ()
{
this.updateTime(1);
console.log(this.hours + ":" + this.minutes + ":" + this.seconds);
};
my_Clock.prototype.updateTime = function (secs)
{
this.seconds+= secs;
if (this.seconds >= 60)
{
this.minutes++;
this.seconds= 0;
}
if (this.minutes >= 60)
{
this.hours++;
this.minutes=0;
}
if (this.hours >= 24)
{
this.hours = 0;
}
};
var clock = new my_Clock();
clock.run();
6 Xem đồng hồ bút 24 giờ của Ancil Eric (@ancileric) trên Codepen. Giải trìnhSự khác biệt duy nhất ở đây là chúng tôi đã loại bỏ câu lệnh IF đầu tiên, đã thay đổi 0 thành 12 và trong lần thứ hai nếu chúng tôi đã loại bỏ điều kiện thành trừ giờ 12 giờ. | 
