CODE ĐỒNG HỒ ĐẾM NGƯỢC

Bài viết từ bây giờ họ đang cùng mọi người trong nhà lấn sân vào tìm hiểu giải pháp chế tạo ra đồng hồ đeo tay đếm ngược (countdown timer) nhé. Trong trang web thì nó hay được thực hiện hầu hết mang lại vấn đề đếm thời gian còn lại của những lịch trình khuyến mãi, thời hạn trình làng mặt hàng mới toanh, sự kiện sắp được tổ chức triển khai... cơ mà bạn có nhu cầu thông báo đến quý khách. Và để làm rõ rộng bọn họ hãy với mọi người trong nhà lấn sân vào khám phá nhé!


Trước tiên khi hy vọng xuất bản một sản phẩm nào đấy thì bạn phải tạo ra một cấu tạo HTML đến nó. Do đó bạn coi đoạn code tiếp sau đây giúp thấy được các bộ phận HTML có vào Countdown timer nhé:


Và công dụng bạn xem ở tiếp sau đây nhé:

See the Pen cau truc html cho coundown timer by haycuoilennao19 (
haycuoilennao19) on CodePen.

Bạn đang xem: Code đồng hồ đếm ngược

Cách tiếp sau là bọn họ cần tô điểm lại thành phần nút (button) trong HTML bằng đoạn mã CSS sau đây nhé:

button border-radius:5px; border:none; padding:15px30px; font-size:24px; display:block; text-transform:uppercase; letter-spacing:2px; cursor:pointer; transition:0.3seaseall; line-height:1; display:flex; background-color:DodgerBlue; color:white; button:hover background:#eee; color:#000; .icon margin-right:8px; .reset font-size:12px; padding:8px16px; margin:50pxauto0; Và kết quả chúng ta xem dưới đây nhé:

See the Pen Them code css đến countdown timer by haycuoilennao19 (
haycuoilennao19) on CodePen.

Việc tiếp sau bọn họ cần làm cho là ẩn đi các số đếm ngược đó lại trải qua trực thuộc tính overflow: hidden. Và chỉ sẽ có được số 10 là được hiển thị, đó cũng là nguyên nhân tại sao bạn cần phải bao gồm nhì số 10 trong bộ phận HTML của chính bản thân mình. Và nhằm nắm rõ hơn chúng ta xem đoạn code dưới đây nhé:

.countdown position:relative; display:block; text-indent:-9999px; overflow:hidden; margin-left:6px; .numbers position:absolute; top:0; left:0; text-align:center; transition:0.3seasetransform; text-indent:0; Và kết quả sinh hoạt tiếp sau đây nhé:

See the Pen An so vào coundown timer css by haycuoilennao19 (
haycuoilennao19) on CodePen.

Tiếp theo chúng ta cần phải áp dụng Javascript nhằm tạo tác dụng mang lại countdown timer. Thứ nhất bọn họ sẽ khởi tạo ra các trở nên để mang những phần tử HTML quan trọng như là class countdown, number, rephối và trở thành để lưu giữ lên tiếng về số đếm tương tự như quý giá boolean để xác minh quy trình chạy của đồng hồ thời trang đếm ngược. Để hiểu rõ rộng chúng ta coi đoạn code sau nhé:

const countdownArea = document.querySelector(".countdown"); const numbersArea = document.querySelector(".numbers"); const resetBtn = document.querySelector(".reset"); let interval; let count = 0; const height = countdownArea.getBoundingClientRect().height; Ở trên mình có lưu ý là nằm trong tính countdownArea.getBoundingClientRect().height để giúp đỡ chúng ta cũng có thể tính toán thù được độ cao những con số của họ. Vậy tại vì sao họ phải đem chiều cao của các con số để gia công gì?

*

Nhỏng bạn thấy hình hình họa nghỉ ngơi bên trên thì đó là quá trình lúc chúng ta chưa áp dụng trực thuộc tính overflow: hidden; cho class countdown. Việc họ đem chiều cao của những con số nhằm tính toán thù cực hiếm offset giúp hiển thị đúng số nhưng mà chúng ta ước muốn bằng ở trong tính transform vào CSS. Và để làm rõ rộng các bạn coi đoạn code tiếp theo dưới đây nhé:

functioncreateTimer() interval=setInterval(()=>count++; constoffset=height*count; numbersArea.style.transform=`translateY(-$offsetpx)`if(count>=10) clearInterval(interval); ,1000); createTimer(); Mình xin lý giải một chút về phong thái buổi giao lưu của đoạn mã bên trên là:Chúng ta đang tăng giá trị mang đến trở nên countSau đó bọn họ đang thực hiện count và height để rất có thể tính toán thù khoảng cách offmix của những nhỏ sốTiếp theo họ tùy chỉnh cực hiếm offset mới thông qua thuộc tính transkhung trong CSSCuối thuộc họ cần sử dụng câu lệnh if(count >= 10) để dừng hàm lúc quý giá count đạt mang lại 10.

Và đó là hiệu quả của chương trình sau khi bọn họ vẫn thêm đoạn mã Javascript nhé:

See the Pen chức năng countdown timer by haycuoilennao19 (
haycuoilennao19) on CodePen.

Do sợ nó đang chạy ngay trong khi load trang bắt buộc chúng ta siêng năng bấm vào chữ "Run Pen" để xem kết quả nha. Việc sau cùng chúng ta nên làm là tùy chỉnh thiết lập công dụng reset mang lại countdown timer (tự động hóa chạy lại khi người dùng bấm vào nút ít reset). Và nhằm rest lại những trực thuộc tính về ban đầu thì các bạn coi đoạn mã sau nhé:

clearInterval(interval); count = 0;numbersArea.style.transform = "translateY(0)" Dưới đó là đoạn mã Javascript hoàn hảo Khi họ thêm chức năng rephối cho countdown timer nhé:

constcountdownArea=document.querySelector(".countdown"); constnumbersArea=document.querySelector(".numbers"); constresetBtn=document.querySelector(".reset"); letinterval; letcount=0; constheight=countdownArea.getBoundingClientRect().height;createTimer();resetBtn.addEventListener("click",createTimer);functioncreateTimer() clearInterval(interval); count=0; numbersArea.style.transform="translateY(0)" interval=setInterval(()=> count++;constoffset=height*count; numbersArea.style.transform=`translateY(-$offsetpx)` if(count>=10)clearInterval(interval); ,1000); Và hiệu quả sau cuối của họ là:

See the Pen them chuc nang rephối mang đến countdown timer by haycuoilennao19 (
haycuoilennao19) on CodePen.

Và đấy là mối cung cấp xem thêm của chính mình nhé: countdown timer

Trước Lúc bước vào ví dụ thì bản thân có một trong những chú ý sau là để xem rõ kết quả rộng chúng ta đưa thanh lịch chế độ screen 0.5x, 0.25x xuất xắc ví như nó ko hiển thị thì bạn ghi nhớ xác minc bản thân là nhỏ người trong Codepen mới xem được nhé. Nếu tệp tin là SCSS thì bạn có thể gửi quý phái CSS ở đây nhé : SCSS to CSS. Nếu bọn họ mong coi những nguồn được áp dụng vào Codepen nhằm các bạn tùy chỉnh thiết lập nghỉ ngơi dưới máy tính thì nhấp vào chữ Resources sinh sống dưới thuộc phía bên trái của Codepen để xem các đường dẫn CDoanh Nghiệp nha.


Draft Countdown


See the Pen Draft Countdown by Dorian Camilleri (
doriancami) on CodePen.

Nguồn

Pure CSS SVG Countdown (Ready)


See the Pen Pure CSS SVG Countdown (Ready) by Nikolay Talanov (
suez) on CodePen.

Nguồn

Javascript Countdown


See the Pen Javascript Countdown by Glauber Sampaio (
glaubersampaio) on CodePen.

Nguồn

Countdown Timer


See the Pen Daily UI #014: Countdown Timer by Fabio Ottaviani (
supah) on CodePen.

Nguồn

Pomodoro Clock


See the Pen Pomodoro Clock by Putra Aryotama (
putraaryotama) on CodePen.

Nguồn

CSS Variable-Powered Clock


See the Pen CSS Variable-Powered Cloông xã by Emily Hayman (
eehayman) on CodePen.

Xem thêm: Bst Đồng Hồ Vacheron Constantin Geneve Swiss Made Gây Sốt Thị Trường

Nguồn

FlipDown.js Example


See the Pen FlipDown.js Example by Peter Butcher (
pbutcher) on CodePen.

Nguồn

Animated Countdown


See the Pen Animated Countdown by Florin Pop (
FlorinPop17) on CodePen.

Nguồn

Vanilla JS Countdown clock


See the Pen Vanilla JS Countdown cloông xã by Tlặng Jackleus (
timjackleus) on CodePen.

Nguồn

Material Clock Countdown


See the Pen Material Clock Countdown by Mohan Khadka (
khadkamhn) on CodePen.

Nguồn

Colored Countdown


See the Pen Colored Countdown by Chris Coyier (
chriscoyier) on CodePen.

Nguồn

Countdown Timer


See the Pen Countdown Timer by Austin Carr (
arcarr) on CodePen.

Nguồn

Countdown Timer


See the Pen Countdown Timer by Matt Smith (
AllThingsSmitty) on CodePen.

Nguồn

CSS Countdown Numbers


See the Pen CSS Countdown Numbers by Marcos Oliveira (
marcosmou) on CodePen.

Nguồn

Puff the Magic Countdown (CSS3)


See the Pen Puff the Magic Countdown (CSS3) by Scott Dawson (
scottpdawson) on CodePen.

Nguồn

Countup and Countdown


See the Pen Countup & Countdown by Chris Johnson (
chrisjdesigner) on CodePen.

Nguồn

Google I/O - Countdown 16


See the Pen Google I/O - Countdown 16 by 72memãng cầu (
72mena) on CodePen.

Nguồn

GSAPhường New Year Countdown Clock


See the Pen GSAPhường New Year Countdown Clock by Animated Creativity (
animatedcreativity) on CodePen.

Nguồn

jQuery.countdown example


See the Pen jQuery.countdown example by bataimx (
bataimx) on CodePen.

Nguồn Tổng kết:

Qua đây mình ao ước bài viết đang hỗ trợ thêm cho chính mình mọi countdown timer có lợi dành cho việc cải cách và phát triển, kiến thiết website và giả dụ tất cả vướng mắc gì cđọng gửi gmail bản thân đã phản hồi nhanh nhất rất có thể. Rất mong mỏi bạn thường xuyên ủng hộ trang web để bản thân có thể viết nhiều bài bác giỏi hơn nữa nhé. Chúc bạn bao gồm một ngày vui vẻ!