Hướng dẫn how do i create a running clock in javascript? - làm cách nào để tạo đồng hồ chạy trong javascript?

Question

Đồng hồ loại hoạt động. Nhưng thay vì thay thế thời gian hiện tại trong ngày, nó in một thời gian mới trong ngày mỗi giây. Tôi hiểu tại sao nó làm điều đó nhưng tôi không biết làm thế nào để sửa chữa nó. Tôi sẽ đánh giá cao nếu bạn có thể cho tôi một số lời khuyên mà không nói câu trả lời thẳng thắn. Cảm ơn bạn. Đây là mã của tôi:

Nội dung chính Show

Làm thế nào để bạn chạy một chiếc đồng hồ trong JavaScript?
Làm thế nào để bạn tạo thời gian chạy trong HTML?
Làm cách nào để thêm ngày và thời gian trực tiếp trong HTML?

function time(){
    var d = new Date();
    var s = d.getSeconds();
    var m = d.getMinutes();
    var h = d.getHours();
    document.write(h + ":" + m + ":" + s);
}

setInterval(time,1000);

KRLZLX

5.65414 Huy hiệu vàng48 Huy hiệu bạc54 Huy hiệu đồng14 gold badges48 silver badges54 bronze badges

Được hỏi ngày 9 tháng 9 năm 2016 lúc 19:21Sep 9, 2016 at 19:21

1

Thêm một phần tử nhịp và cập nhật nội dung văn bản của nó.

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

Trả lời Cập nhật [2022] https://stackoverflow.com/a/67149791/7942242 https://stackoverflow.com/a/67149791/7942242

CRG

3.7712 huy hiệu vàng23 Huy hiệu bạc49 Huy hiệu đồng2 gold badges23 silver badges49 bronze badges

Đã trả lời ngày 9 tháng 9 năm 2016 lúc 19:23Sep 9, 2016 at 19:23

Hướng dẫn how do i create a running clock in javascript? - làm cách nào để tạo đồng hồ chạy trong javascript?

Pranav C Balanpranav C BalanPranav C Balan

Huy hiệu vàng 111K2323 gold badges160 silver badges180 bronze badges

2

Bạn cũng có thể sử dụng tolocaletimestring () vào ngày () để chỉ nhận ngày hiển thị của bạn thay vì tạo thông qua rất nhiều biến.

window.onload = displayClock();
function displayClock(){
  var display = new Date().toLocaleTimeString();
  document.body.innerHTML = display;
  setTimeout(displayClock, 1000); 
}

Đã trả lời ngày 17 tháng 1 năm 2020 lúc 19:13Jan 17, 2020 at 19:13

Yusrasyedyusrasyedyusrasyed

1791 Huy hiệu bạc5 Huy hiệu đồng1 silver badge5 bronze badges

Đây là câu trả lời của tôi, hy vọng nó có thể giúp ích.

Tôi đã sử dụng hàm mũi tên

3 và khai báo các biến

4,

5 bên ngoài để tránh phân bổ lặp đi lặp lại, trong đó ID nhịp (thời gian) chạy trong một khoảng thời gian được chỉ định (ở đây là 1000) và

6 cuộc gọi giúp bạn có phần tử được chỉ định bởi phần tử được chỉ định ID và nó cũng đặt

7 của phần tử đó thành giá trị của

5.

Đã trả lời ngày 18 tháng 4 năm 2021 lúc 10:52Apr 18, 2021 at 10:52

2

Chỉ cần sử dụng

9 nó sẽ cung cấp cho bạn những gì bạn muốn.

setInterval(() => console.log(new Date().toLocaleTimeString()),1000);

Đã trả lời ngày 18 tháng 4 năm 2021 lúc 14:38Apr 18, 2021 at 14:38

crgcrgcrg

3.7712 huy hiệu vàng23 Huy hiệu bạc49 Huy hiệu đồng2 gold badges23 silver badges49 bronze badges

Đã trả lời ngày 9 tháng 9 năm 2016 lúc 19:23

Pranav C Balanpranav C Balan

Huy hiệu vàng 111K23Apr 7, 2018 at 14:35

1

Bạn cũng có thể sử dụng tolocaletimestring () vào ngày () để chỉ nhận ngày hiển thị của bạn thay vì tạo thông qua rất nhiều biến.

function myClock() {         
  setTimeout(function() {   
    const d = new Date();
    const n = d.toLocaleTimeString();
    document.getElementById("demo").innerHTML = n; 
    myClock();             
  }, 1000)
}
myClock();

Đã trả lời ngày 17 tháng 1 năm 2020 lúc 19:13Jul 9, 2021 at 5:18

w.Dayaw.Dayaw.Daya

Yusrasyedyusrasyed1 gold badge5 silver badges11 bronze badges

2

1791 Huy hiệu bạc5 Huy hiệu đồng

const clock12 = document.getElementById('clock12')
const clock24 = document.getElementById('clock24')

// Concatenate a zero to the left of every single digit time frame
function concatZero(timeFrame) {
  return timeFrame < 10 ? '0'.concat(timeFrame) : timeFrame
}

function realTime() {
  let date = new Date()
  let sec = date.getSeconds()
  let mon = date.getMinutes()
  let hr = date.getHours()
  // 12 hour time
  // If the hour equals 0 or 12, the remainder equals 0, so output 12 instead. (0 || 12 = 12)
  clock12.textContent = `${concatZero((hr % 12) || 12)} : ${concatZero(mon)} : ${concatZero(sec)} ${hr >= 12 ? 'PM' : 'AM'}`
  // 24 hour time
  clock24.textContent = `${concatZero(hr)} : ${concatZero(mon)} : ${concatZero(sec)}`
}

setInterval(realTime, 1000)

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

0

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

1

Đây là câu trả lời của tôi, hy vọng nó có thể giúp ích.Jun 18, 2020 at 3:33

Tôi đã sử dụng hàm mũi tên

3 và khai báo các biến

4,

5 bên ngoài để tránh phân bổ lặp đi lặp lại, trong đó ID nhịp (thời gian) chạy trong một khoảng thời gian được chỉ định (ở đây là 1000) và

6 cuộc gọi giúp bạn có phần tử được chỉ định bởi phần tử được chỉ định ID và nó cũng đặt

7 của phần tử đó thành giá trị của

5.Diego

Đã trả lời ngày 18 tháng 4 năm 2021 lúc 10:521 silver badge6 bronze badges

Chỉ cần sử dụng

9 nó sẽ cung cấp cho bạn những gì bạn muốn.

Đã trả lời ngày 18 tháng 4 năm 2021 lúc 14:38the current time of day it prints a new time of day every second.

crgcrg

Vui lòng theo liên kết này https://codepen.io/uniqname/pen/eiapt Bạn sẽ nhận được đồng hồ mong muốn của mình hoặc thử mã nàya single moment in time in a platform-independent format.

system clock (thus not creating a separate process for measuring the time). tl;dr: just create a new Date object every second as you do.

Đã trả lời ngày 7 tháng 4 năm 2018 lúc 14:35

Mã sẽ hiển thị đồng hồ ở định dạng kỹ thuật số[in setInterval in your case] automatically calls document.open(), which will clear the document.

Đã trả lời ngày 9 tháng 7 năm 2021 lúc 5:18

3541 Huy hiệu vàng5 Huy hiệu bạc11 Huy hiệu đồngApr 7, 2021 at 7:39

Điều này có thể được thực hiện độc đáo bằng ES6.Jan Turoň

Đã trả lời ngày 18 tháng 6 năm 2020 lúc 3:3321 gold badges117 silver badges163 bronze badges

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

2

DiegodiegoDec 26, 2021 at 4:17

631 Huy hiệu bạc6 Huy hiệu đồng

http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock

Nếu đây là gốc rễ của vấn đề của bạn you are using document.write which appends the current time each time (and that's what your problem was if I am not wrong). So for replacing previous time with new time - 1. you have to open document with replace mode (as shown in code below) 2. you write the current time 3. then you close the document.

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

3

Nhưng thay vì thay thế thời gian hiện tại trong ngày, nó in một thời gian mới trong ngày mỗi giây.Sep 9, 2016 at 19:27

sau đó bạn không thể làm cho đối tượng ngày phản hồi, bởi vìAniket Singh

Các đối tượng ngày JavaScript biểu thị một thời điểm duy nhất theo định dạng độc lập với nền tảng.1 gold badge19 silver badges30 bronze badges

2

Nếu bạn không muốn tạo một đối tượng mới mỗi giây, bạn có thể đăng ký một nhân viên web chuyên dụng gọi hiệu suất. Đồng hồ hệ thống thực tế (do đó không tạo ra một quy trình riêng để đo thời gian). TL; DR: Chỉ cần tạo một đối tượng ngày mới mỗi giây như bạn làm.

Root của vấn đề

window.onload = displayClock();
function displayClock(){
  var display = new Date().toLocaleTimeString();
  document.body.innerHTML = display;
  setTimeout(displayClock, 1000); 
}

0 của bạn bắt nguồn từ điều này:

Vì document.write () ghi vào luồng tài liệu, Calling Document.write () trên tài liệu đã đóng (tải) [trong setInterval trong trường hợp của bạn] tự động gọi document.open (), sẽ xóa tài liệu.Feb 23, 2017 at 17:02

Để cập nhật một phần trang của bạn, bạn thường đặt bên trong của một số yếu tố như @pranav gợi ý.

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

7

Đã trả lời ngày 7 tháng 4 năm 2021 lúc 7:39Dec 5, 2018 at 17:21

Jan Turoňjan Turoňdrussell

29,7K21 Huy hiệu vàng117 Huy hiệu bạc163 Huy hiệu đồng4 silver badges5 bronze badges

Đã trả lời ngày 26 tháng 12 năm 2021 lúc 4:17

Một bản demo hoạt động, theo liên kết

Cập nhật bạn đang sử dụng Document.Write mà mỗi lần tiếp tục thời gian hiện tại (và đó là vấn đề của bạn nếu tôi không sai). Vì vậy, để thay thế thời gian trước bằng thời gian mới - 1. Bạn phải mở tài liệu bằng chế độ thay thế (như được hiển thị trong mã bên dưới) 2. Bạn viết thời gian hiện tại 3. Sau đó, bạn đóng tài liệu.

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

8

Đã trả lời ngày 9 tháng 9 năm 2016 lúc 19:27

Aniket Singhaniket Singh37 gold badges68 silver badges88 bronze badges

2.2541 Huy hiệu vàng19 Huy hiệu bạc 30 Huy hiệu ĐồngNov 26, 2021 at 4:45

Có ai muốn biết cách viết mã đồng hồ kỹ thuật số bằng báo thức không? Đây là codepen của tôi http://codepen.io/abhilashn/pen/zlgxbw

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

4

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

5

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

6continuing on yusrasyed's answer from above:

var span = document.getElementById('span');

function time() {
  var d = new Date();
  var s = d.getSeconds();
  var m = d.getMinutes();
  var h = d.getHours();
  span.textContent = 
    ("0" + h).substr(-2) + ":" + ("0" + m).substr(-2) + ":" + ("0" + s).substr(-2);
}

setInterval(time, 1000);

9

Đã trả lời ngày 7 tháng 4 lúc 1:37Apr 7 at 1:37

Một chiếc đồng hồ đơn giản sẽ giống như

0

Bảng điều khiển của nó đăng nhập một mảng là [H, M, S].

Đã trả lời ngày 7 tháng 7 lúc 18:53Jul 7 at 18:53

Ý bạn là gì về "thời gian mới trong ngày"? Nhưng để thay thế thời gian mới, bạn có thể tạo một div chứa thời gian và mỗi khi bạn gọi thời gian (), hãy đặt div.innerhtml = "", như bên dưới

HTML:

1

JS:

2

Đã trả lời ngày 9 tháng 9 năm 2016 lúc 19:29Sep 9, 2016 at 19:29

0

Làm thế nào để bạn chạy một chiếc đồng hồ trong JavaScript?

Mã đồng hồ JavaScript (12 giờ): hàm currentTime () {let date = new date ();Đặt HH = ngày.Gethours ();Đặt mm = ngày.getMinutes ();Đặt SS = Ngày.GetSeconds ();Đặt phiên = "AM";if (hh == 0) {hh = 12;} if (hh> 12) {hh = hh - 12;phiên = "PM";} hh = (hh <10)?

Làm thế nào để bạn tạo thời gian chạy trong HTML?

Thời điểm hiện tại:..

.

var hôm nay = ngày mới () ;.

var time = hôm nay.Gethours () + ":" + hôm nay.getMinutes () + ":" + ngay hôm nay.GetSeconds () ;.

tài liệu.getEuityById ("currentTime").giá trị = thời gian ;.

Làm cách nào để thêm ngày và thời gian trực tiếp trong HTML?

Trình xây dựng ngày mới () được sử dụng để tạo đối tượng ngày.Ngày và giờ hiện tại được lưu trữ bên trong biến JavaScript.Sau đó, sử dụng thuộc tính TextContent Nội dung của phần tử Span HTML được đặt với hiện tại và thời gian.

programming javascript Live time js Get time JavaScript Moment clock Show time HTML Create timer JS

Hướng dẫn how do i create a running clock in javascript? - làm cách nào để tạo đồng hồ chạy trong javascript?

Làm thế nào để bạn chạy một chiếc đồng hồ trong JavaScript?

Làm thế nào để bạn tạo thời gian chạy trong HTML?

Làm cách nào để thêm ngày và thời gian trực tiếp trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội