Mã đếm ngược. Đếm ngược. Đồng hồ đếm ngược. Ví dụ hoạt động của Đồng hồ đếm ngược với thông báo khi hết thời gian

Đồng hồ đếm ngược đơn giản và tiện lợi nhất

HTML

Đồng hồ đếm ngược

ngày

Giờ

Phút

Giây

CSS

body ( text-align: center; nền: #00ecb9; font-family: sans-serif; font-weight: 100; ) .countdown-title ( color: #396; font-weight: 100; font-size: 40px; lề: 40px 0px 20px; ) .countdown ( font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; ) .countdown -number ( đệm: 10px; bán kính đường viền: 3px; nền: #00bf96; hiển thị: khối nội tuyến; ) .countdown-time ( đệm: 15px; bán kính đường viền: 3px; nền: #00816a; hiển thị: khối nội tuyến ; ) .countdown-text ( display: block; đệm-top: 5px; cỡ chữ: 16px; )

Javascript

hàm getTimeRemaining(endtime) ( var t = Date.parse(endtime) - Date.parse(new Date()); var giây = Math.floor((t / 1000) % 60); var phút = Math.floor(( t / 1000 / 60) % 60); var giờ = Math.floor((t / (1000 * 60 * 60)) % 24); var day = Math.floor(t / (1000 * 60 * 60 * 24) ); return ("tổng": t, "ngày": ngày, "giờ": giờ, "phút": phút, "giây": giây); ) hàm khởi tạoClock(id, endtime) ( var clock = document.getElementById (id); var DaysSpan = clock.querySelector(".days"); var HoursSpan = clock.querySelector(".hours"); var phútSpan = clock.querySelector(". phút"); var giâySpan = clock.querySelector( ".seconds"); hàm updateClock() ( var t = getTimeRemaining(endtime); DaysSpan.innerHTML = t.days; HoursSpan.innerHTML = ("0" + t.hours).slice(-2); MinuteSpan.innerHTML = ("0" + t.phút).slice(-2); giâySpan.innerHTML = ("0" + t.seconds).slice(-2); if (t.total<= 0) { clearInterval(timeinterval); } } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000); // for endless timer initializeClock("countdown", deadline);

Chỉ định ngày kết thúc của bộ đếm thời gian

Định dạng đầu ra ngày ISO 8601:

Thời hạn Var = "2015-12-31";

Định dạng ngắn:

Thời hạn Var = "31/12/2015";

Định dạng dài:

Hạn chót Var = "31 tháng 12 năm 2015";

Hiển thị ngày với thời gian và múi giờ chính xác:

Thời hạn Var="01 tháng 1 năm 2018 00:00:00 GMT+0300";

Đầu ra hẹn giờ cho các trang đích – bộ hẹn giờ sẽ luôn hiển thị rằng còn 15 ngày (bạn có thể chỉ định bất kỳ lúc nào)

Thời hạn Var = Ngày mới(Date.parse(Ngày mới()) + 15 * 24 * 60 * 60 * 1000);

Ví dụ hoạt động của Đồng hồ đếm ngược

Ẩn bộ đếm thời gian sau khi hết thời gian và hiển thị thông báo đã hết thời gian

Giải pháp này đã được đề xuất trong phần bình luận của Igor.

Thêm khối có thông báo vào HTML

Hêt giơ!

Thêm các kiểu sau vào CSS:

Tin nhắn thời hạn( display: none; font-size: 24px; font-style: italic; ) .visible( display: block; ) .hidden( display: none; )

Trong tập lệnh, chúng tôi thay đổi hàm khởi tạo bộ hẹn giờ bằng hàm initizeClock(id, endtime) (...) , giữ nguyên phần còn lại như cũ:

Hàm khởi tạoClock(id, endtime) ( var clock = document.getElementById(id); var DaysSpan = clock.querySelector(".days"); var HoursSpan = clock.querySelector(".hours"); var phútSpan = clock.querySelector ("".phút"); var giâySpan = clock.querySelector(".seconds"); hàm updateClock() ( var t = getTimeRemaining(endtime); if (t.total<= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-message").className = "visible"; clearInterval(timeinterval); return true; } daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); } updateClock(); var timeinterval = setInterval(updateClock, 1000); }

Điều đã thay đổi trong chức năng này là khi bộ hẹn giờ hết hạn, một lớp .hidden sẽ được thêm vào chính bộ hẹn giờ (ẩn bộ hẹn giờ) và một lớp .visible được thêm vào thông báo về thời gian kết thúc (hiển thị một thông báo), và chúng tôi cũng dừng thực thi hàm bằng cách gọi phương thức clearInterval(timeinterval)); . Và đầu ra của các đơn vị thời gian được đặt sau khi kiểm tra xem thời gian đã hết hay chưa.

Ví dụ hoạt động của Đồng hồ đếm ngược với thông báo khi hết thời gian

Nhấn vào nút Chạy lạiđể đảm bảo mọi thứ đều hoạt động như bình thường.

Đồng hồ đếm ngược với khởi động lại

Bản chất của bộ đếm thời gian là khi hết thời gian, bộ đếm thời gian không dừng lại, không có thông báo nào được hiển thị mà chỉ bắt đầu đếm ngược mới:

Bộ hẹn giờ được đặt trong 5 giây và sẽ khởi động lại thêm 5 giây nữa khi hết thời gian

Hàm getTimeRemaining(endtime) ( var t = Date.parse(endtime) - Date.parse(new Date()); var giây = Math.floor((t / 1000) % 60); var phút = Math.floor(( t / 1000 / 60) % 60); var giờ = Math.floor((t / (1000 * 60 * 60)) % 24); var day = Math.floor(t / (1000 * 60 * 60 * 24) ); return ( tổng: t, ngày: ngày, giờ: giờ, phút: phút, giây: giây ); ) hàm khởi tạoClock(id, endtime) ( var clock = document.getElementById(id); var DaysSpan = clock.querySelector ("".ngày"); var giờSpan = clock.querySelector(".hours"); var phútSpan = clock.querySelector(". Minutes"); var giâySpan = clock.querySelector(".seconds"); hàm updateClock() ( var t = getTimeRemaining(endtime); if (t.total<= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); } daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline);

Sự khác biệt trong mã JS giữa tùy chọn hiển thị thông báo về thời gian hết hạn chỉ nằm ở việc thay thế mã này

Nếu(t.tổng<= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-messadge").className = "visible"; clearInterval(timeinterval); return true; }

Nếu(t.tổng<= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); }

Xin lưu ý rằng khi đặt lại bộ đếm thời gian, chúng ta cần đặt thời hạn mới và nó có thể khác hoàn toàn so với thời hạn ban đầu, được ghi ở dòng mã áp chót:

Thời hạn Var = Ngày mới(Date.parse(new Date()) + 5 * 1000);

Trong khuôn khổ công cụ được trình bày, các chế độ hoạt động khác nhau của đồng hồ bấm giờ trực tuyến được triển khai:

Đồng hồ bấm giờ - đếm ngược
Đồng hồ đếm ngược có âm thanh
Bộ hẹn giờ khoảng

Ví dụ: đồng hồ bấm giờ miễn phí có thể được sử dụng để đo nhịp tim của bạn, đăng ký thành tích thể thao không chính thức hoặc vượt qua các tiêu chuẩn. Đối với các nhà tiếp thị và người thử nghiệm, đồng hồ bấm giờ trực tuyến có thể hữu ích để đếm thời gian khi kiểm tra khả năng sử dụng của trang web hoặc ứng dụng (đánh giá khả năng sử dụng). Đếm ngược có thể được sử dụng trong quá trình huấn luyện, chẳng hạn như lắp ráp và tháo rời vũ khí hoặc khối Rubik.

Các cài đặt ban đầu của đồng hồ bấm giờ hoặc đồng hồ đếm ngược được đặt trực tiếp trong giao diện, chỉ cần nhấp vào các con số và đặt giá trị mong muốn.

Bộ đếm thời gian tập luyện

Bạn có thể sử dụng bộ hẹn giờ tập thể dục để đặt khoảng thời gian cho Tabata và các bài tập luyện xen kẽ khác với thời gian nghỉ xen kẽ và bài tập cường độ cao. Nó hỗ trợ thiết lập khoảng thời gian làm việc và nghỉ ngơi cũng như thiết lập số vòng (lặp lại).

Đồng hồ bấm giờ có sẵn trực tuyến và miễn phí. Trong bộ đếm thời gian, bạn có thể đặt đếm ngược thành 30 giây, 1, 2 phút hoặc thời gian tùy ý. Không cần phải tải chương trình về máy tính hoặc cài đặt ứng dụng trên điện thoại. Dịch vụ hẹn giờ trực tuyến có thể được sử dụng vào thời gian và địa điểm thuận tiện thông qua Internet.

Nếu bạn đột nhiên cần sử dụng đồng hồ hẹn giờ hoặc đồng hồ bấm giờ nhưng không có sẵn thiết bị cần thiết thì ứng dụng này sẽ hỗ trợ bạn!

Chú ý! Để hiển thị phần tử tương tác trong một bài viết, bạn sẽ cần cài đặt Adobe Flash Player trên hệ thống (trình duyệt) của mình.

CÁCH SỬ DỤNG:

Đồng hồ bấm giờ trực tuyến có âm thanh

Nhấn nút Đồng hồ bấm giờ, sau đó nhấn nút Bắt đầu. Bạn sẽ nghe thấy một tiếng bíp cho biết quá trình đếm ngược đã bắt đầu.

Khi kết thúc phép đo, nhấn nút “Dừng”, nhiều tín hiệu sẽ phát ra, nhưng lần này cho biết quá trình đếm ngược đã kết thúc.

Đồng hồ đếm ngược trực tuyến có âm thanh

Nhấp vào nút Hẹn giờ. Một cửa sổ cài đặt thời gian hẹn giờ sẽ mở ra. Chọn số phút và giây mong muốn và nhấp vào OK. Nhấp vào nút "Bắt đầu". Một âm báo sẽ vang lên và quá trình đếm ngược sẽ bắt đầu.

Bạn có thể dừng bộ hẹn giờ bất cứ lúc nào bằng cách nhấn nút “Dừng” hoặc đợi cho đến khi thời gian đã đặt kết thúc đếm – tín hiệu sẽ phát ra.

Hẹn giờ khoảng thời gian trực tuyến

Để bắt đầu bấm giờ khoảng thời gian, hãy nhấp vào nút Khoảng thời gian. Bộ hẹn giờ này vượt trội hơn so với nhiều bộ hẹn giờ tương tự ở chỗ nó cho phép bạn đặt hai khoảng thời gian khác nhau và số vòng (lặp lại).

Ví dụ: bạn muốn có âm thanh phát ra cứ sau 10 giây trong một phút. Để thực hiện việc này, chọn Khoảng thời gian 1 =10, Khoảng thời gian 2 =10, Vòng =6 và nhấp vào nút “Bắt đầu”.

Và nếu bạn muốn âm thanh phát ra lần đầu tiên ở thời điểm 10 giây đếm ngược và lần thứ hai, chẳng hạn ở 25, thì hãy đặt Khoảng thời gian 1 = 10, Khoảng thời gian 2 = 25. Xác định số vòng dựa trên yêu cầu của bạn.

Đồng hồ bấm giờ và đồng hồ bấm giờ trực tuyến miễn phí này phù hợp với mục đích gì? Vì bất cứ điều gì! Để đo mạch, nhịp thở, để nhắc nhở bạn về điều gì đó (đun sôi trứng), để tập thể dục với khối Rubik (để tập tốc độ), để rèn luyện và rèn luyện thể chất - phạm vi sử dụng của nó là vô tận!

Trực tuyến hẹn giờ sẽ cho phép bạn tính thời gian cho nhiều sự kiện khác nhau - ngay cả khi đó là việc luộc trứng. Với đồng hồ đếm ngược chắc chắn bạn sẽ không bỏ lỡ thời điểm thích hợp.

Để đặt hẹn giờ, bạn cần nhấp vào nút “Đặt hẹn giờ” và chỉ định thời gian cần thiết (giờ, phút và giây) trong cửa sổ bật lên hoặc bạn có thể chọn chỉ định ngày và giờ cụ thể để hẹn giờ. kích hoạt sau vài ngày. Nếu bạn cần thông báo bằng âm thanh khi đến thời gian quy định thì hãy chọn giai điệu mong muốn từ danh sách (bạn có thể nghe từng giai điệu). Bạn cũng có thể chỉ định một thông báo sẽ hiển thị trên màn hình khi được kích hoạt đồng hồ đếm ngược. Sau khi chỉ định tất cả các thông tin cần thiết, hãy nhấp vào “Bắt đầu” để bắt đầu hẹn giờ trực tuyến.

Hãy nhớ điều đó để kích hoạt hẹn giờ trực tuyến với âm thanh trên máy tính hoặc điện thoại thì phải bật âm thanh loa (trên điện thoại bạn cần đảm bảo rằng âm thanh “Media” được đặt ở mức mong muốn)! Nếu bạn không cần phát giai điệu, bạn có thể bỏ chọn hộp kiểm “Cuộc gọi hẹn giờ”. Trong trường hợp này, chỉ có thông báo sẽ được chỉ định.

Để bộ hẹn giờ trực tuyến hoạt động chính xác Không cần với kết nối Internet liên tục, nhưng nó Sẽ không làm việc, nếu trình duyệt bị đóng hoặc máy tính bị tắt/ở chế độ ngủ.

Tại sao bạn cần đồng hồ đếm ngược trực tuyến? Chúng tôi rất cần phải đo thời gian. Không có thiết bị đặc biệt nào trong tay. Sử dụng đồng hồ thông thường hay điện thoại di động có bất tiện không? Chúng tôi mang đến cho bạn sự chú ý của một bộ đếm thời gian trực tuyến. Nó có độ chính xác cao và dễ sử dụng.

Bộ tính giờ trực tuyến là không thể thiếu trong quá trình luyện tập thể thao hoặc kết hợp nhiều nhiệm vụ. Khi điều quan trọng là không được bỏ lỡ thời gian và chỉ cần đo lường hồ sơ cá nhân. Điều rất quan trọng là bạn phải biết mình sẽ đọc bao nhiêu trang trong một khoảng thời gian nhất định. Bạn gõ bao nhiêu ký tự mỗi phút hoặc bạn có thể hoàn thành một vòng quan trọng trong trò chơi nhanh như thế nào.

Hẹn giờ trực tuyến cho mọi sở thích

Dưới đây là bộ đếm thời gian đảo ngược với cả thiết kế ngắn gọn và nguyên bản. Bạn có thể mở rộng ứng dụng ra toàn màn hình. Trang trí máy tính để bàn của bạn với đồ cổ đẹp mắt hoặc đồng hồ cát, tên lửa, quả bom, ngọn nến lãng mạn. Tất cả các bộ tính giờ đều có chức năng thuận tiện. Chỉ mất vài giây để thiết lập thời gian.

Bạn có thể sử dụng đồng hồ đếm ngược trực tuyến có âm thanh trực tiếp trên trang web của chúng tôi. Mở bất kỳ bộ đếm thời gian nào ở chế độ toàn màn hình. Hãy coi trọng thời gian của bạn. Mọi thứ đều rất đơn giản và nhanh chóng! Nếu có kết nối Internet, bạn có thể kích hoạt bộ hẹn giờ hoàn toàn miễn phí bất cứ lúc nào thuận tiện cho bạn.

Đồng hồ đếm ngược trực tuyến hoạt động như thế nào?

Tất cả các bộ tính giờ được trình bày trong phần này đều có cách điều khiển rất đơn giản và thuận tiện. Cho biết khoảng thời gian bạn cần, nhấn “bắt đầu” và bộ hẹn giờ sẽ bắt đầu hoạt động!

Thông thường, mỗi đồng hồ đếm ngược có ba cửa sổ:

cái đầu tiên hiển thị giờ
trong giây - phút
trong giây thứ ba

Nếu cần, bạn có thể sử dụng chức năng “tạm dừng” hoặc hủy hoàn toàn tác vụ.

Bạn có muốn chọn bộ đếm thời gian trực tuyến tốt nhất? Tất cả các quầy đều ở đây. Hãy chọn cái phù hợp với bạn! Sau khi sử dụng bộ đếm thời gian, bạn cũng có thể thoải mái chia sẻ ý kiến của mình với người khác!