Code đếm ngược thời gian

Bài viết lúc này chúng ta đang cùng mọi người trong nhà bước vào mày mò cách sinh sản đồng hồ đếm ngược (countdown timer) nhé. Trong website thì nó thường xuyên được thực hiện hầu hết đến câu hỏi đếm thời gian sót lại của những chương trình tặng, thời gian trình làng mặt hàng mới, sự kiện chuẩn bị được tổ chức… cơ mà bạn có nhu cầu thông tin mang lại quý khách. Và nhằm làm rõ hơn họ hãy cùng mọi người trong nhà lấn sân vào khám phá nhé!


trước hết Lúc mong kiến thiết một sản phẩm nào đó thì bạn phải tạo thành một kết cấu HTML đến nó. Do đó chúng ta coi đoạn code dưới đây để thấy được những bộ phận HTML gồm trong Countdown timer nhé:

Và công dụng bạn coi sinh hoạt sau đây nhé:

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

You watching: Code đếm ngược thời gian

Đang xem: Code đồng hồ đeo tay đếm ngược

Bước tiếp sau là chúng ta buộc phải trang trí lại thành phần nút ít (button) vào 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ả các bạn coi tiếp sau đây nhé:

See the Pen Them code css cho countdown timer by haycuoilennao19 (haycuoilennao19) on CodePen.

Việc tiếp sau họ phải làm cho là ẩn đi phần nhiều số đếm ngược đó lại trải qua nằm trong tính overflow: hidden. Và chỉ sẽ có số 10 là được hiển thị, đó cũng là nguyên nhân tại sao bạn phải có nhì số 10 vào phần tử HTML của bản thân mình. Và để nắm rõ rộng chúng ta coi đ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à tác dụng ở tiếp sau đây nhé:

See the Pen An so trong coundown timer css by haycuoilennao19 (haycuoilennao19) on CodePen.

Tiếp theo bọn họ rất cần được thực hiện Javascript để xây cất tính năng mang lại countdown timer. Thứ nhất chúng ta sẽ tạo ra những đổi thay để đưa các bộ phận HTML cần thiết như là class countdown, number, remix với biến hóa để lưu giữ biết tin về số đếm cũng tương tự quý hiếm boolean nhằm xác minh quá trình chạy của đồng hồ đeo tay đếm ngược. Để nắm rõ hơn bạn 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 bản thân có để ý là nằm trong tính countdownArea.getBoundingClientRect().height để giúp bạn có thể tính toán được độ cao những số lượng của chúng ta. Vậy vì sao họ yêu cầu lấy chiều cao của các con số để gia công gì?

*

Như các bạn thấy hình hình ảnh nghỉ ngơi trên thì đó là quá trình khi bọn họ chưa thực hiện thuộc tính overflow: hidden; mang đến class countdown. Việc bọn họ đem chiều cao của những số lượng nhằm tính toán cực hiếm offset giúp hiển thị đúng số nhưng mà chúng ta mong ước bằng thuộc tính transform vào CSS. Và nhằm làm rõ rộng chúng ta xem đoạn code tiếp sau 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 tẹo về kiểu cách hoạt động vui chơi của đoạn mã trên là:Chúng ta đã đội giá trị cho biến chuyển countSau đó chúng ta vẫn áp dụng count và height nhằm rất có thể tính toán thù khoảng cách offphối của các nhỏ sốTiếp theo họ tùy chỉnh quý giá offmix mới trải qua thuộc tính transform trong CSSCuối thuộc chúng ta dùng câu lệnh if(count >= 10) để dừng hàm Lúc quý hiếm count đạt cho 10.

Và đấy là công dụng của chương trình sau khoản thời gian bọn họ đã thêm đoạn mã Javascript nhé:

See the Pen tính năng countdown timer by haycuoilennao19 (haycuoilennao19) on CodePen.

Do hại nó sẽ chạy ngay lúc load trang cần bạn cần mẫn nhấp vào chữ “Run Pen” giúp xem tác dụng nha. Việc sau cuối bọn họ đề nghị làm là cấu hình thiết lập tác dụng rephối mang đến countdown timer (tự động hóa chạy lại Lúc người tiêu dùng nhấp vào nút reset). Và nhằm rest lại các nằm trong tính về ban đầu thì chúng ta xem đoạn mã sau nhé:

clearInterval(interval); count = 0;numbersArea.style.transsize = “translateY(0)” Dưới đây là đoạn mã Javascript hoàn hảo Lúc chúng ta thêm công dụ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à kết quả sau cuối của chúng ta là:

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

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

Trước lúc bước vào ví dụ thì mình tất cả một trong những để ý sau là giúp xem rõ tác dụng hơn bạn gửi sang trọng cơ chế screen 0.5x, 0.25x xuất xắc trường hợp nó không hiển thị thì các bạn ghi nhớ xác minch bản thân là nhỏ người vào Codepen bắt đầu xem được nhé. Nếu tệp tin là SCSS thì chúng ta cũng có thể chuyển quý phái CSS ở chỗ này nhé : SCSS to CSS. Nếu họ mong muốn coi các nguồn được thực hiện trong Codepen nhằm 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 làm việc bên dưới cùng phía bên trái của Codepen giúp xem các đường dẫn CDN 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 Cloông xã by Putra Aryotama (putraaryotama) on CodePen.

Nguồn

CSS Variable-Powered Clock

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

See more: Tác Dụng Của Tinh Dầu Hoa Bưởi Chuẩn Ông Bà Ta, Tinh Dầu Hoa Bưởi Mộc Nhiên Nguyên Chất 100%

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 clochồng by Tyên Jackleus (timjackleus) on CodePen.

Nguồn

Material Clochồng Countdown

See the Pen Material Cloông xã 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 và 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 72mena (72mena) on CodePen.

Nguồn

GSAP New Year Countdown Clock

See the Pen GSAP.. New Year Countdown Cloông xã by Animated Creativity (animatedcreativity) on CodePen.

See more: Ruốc Tôm Để Được Bao Lâu ❓ Cách Bảo Quản Ruốc Tôm Đúng Cách❓

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 ý muốn bài viết sẽ cung cấp thêm cho chính mình hồ hết countdown timer hữu dụng dành riêng cho Việc cải cách và phát triển, kiến tạo website với trường hợp tất cả thắc mắc gì cứ đọng gửi email bản thân sẽ bình luận sớm nhất rất có thể. Rất mong muốn các bạn tiếp tục ủng hộ trang web nhằm bản thân rất có thể viết những bài xuất xắc không chỉ có thế nhé. Chúc chúng ta gồm một ngày vui vẻ!