Code Đồng Hồ Đếm Ngược Html Đơn Giản, Code Đồng Hồ Đếm Ngược Thời Gian Cho Blogspot

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

Tiếp theo chúng ta cần phải sử dụng Javascript để xây dựng chức năng cho countdown timer. Đầu tiên chúng ta sẽ tạo ra các biến để lấy các phần tử HTML cần thiết như là class countdown, number, reset và biến để lưu thông tin về số đếm cũng như giá trị boolean để xác định quá trình chạy của đồng hồ đếm ngược. Để hiểu rõ hơn bạn xem đ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à thuộc tính countdownArea.getBoundingClientRect().height sẽ giúp bạn có thể tính toán được chiều cao các con số của chúng ta. Vậy tại sao chúng ta cần lấy chiều cao của các con số để làm gì?

Như bạn thấy hình ảnh ở trên thì đây là quá trình khi chúng ta chưa sử dụng thuộc tính overflow: hidden; cho class countdown. Việc chúng ta lấy chiều cao của các con số để tính toán giá trị offset giúp hiển thị đúng số mà chúng ta mong muốn bằng thuộc tính transform trong CSS. Và để hiểu rõ hơn bạn xem đoạn code tiếp theo sau đây nhé:

functioncreateTimer(){ interval=setInterval(()=>{count++; constoffset=height*count; numbersArea.style.transform=`translateY(-${offset}px)`if(count>=10){ clearInterval(interval); } },1000); } createTimer(); Mình xin giải thích một tý về cách hoạt động của đoạn mã trên là:Chúng ta sẽ tăng giá trị cho biến countSau đó chúng ta sẽ sử dụng count và height để có thể tính toán khoảng cách offset của các con sốTiếp theo chúng ta thiết lập giá trị offset mới thông qua thuộc tính transform trong CSSCuối cùng chúng ta dùng câu lệnh if(count >= 10) để dừng hàm khi giá trị count đạt đến 10.

Và đây là kết quả của chương trình sau khi chúng ta đã thêm đoạn mã Javascript nhé:

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

Do sợ nó sẽ chạy ngay khi load trang nên bạn chịu khó nhấn vào chữ “Run Pen” để thấy kết quả nha. Việc cuối cùng chúng ta cần làm là thiết lập chức năng reset cho countdown timer (tự động chạy lại khi người dùng nhấn vào nút reset). Và để rest lại các thuộc tính về ban đầu thì bạn xem đoạn mã sau nhé:

clearInterval(interval); count = 0;numbersArea.style.transform = “translateY(0)” Dưới đây là đoạn mã Javascript hoàn chỉnh khi chúng ta thêm chức năng reset 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(-${offset}px)` if(count>=10){clearInterval(interval); } },1000); } Và kết quả cuối cùng của chúng ta là:

See the Pen them chuc nang reset cho countdown timer by haycuoilennao19 (
haycuoilennao19) on CodePen.

Và đây là nguồn tham khảo của mình nhé: countdown timer

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 Clock by Emily Hayman (
eehayman) on CodePen.

Xem thêm: Good Bargain Là Gì ? Định Nghĩa, Ví Dụ, Giải Thích This Is A Real Bargain

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 clock by Tim 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 and 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 Clock by Animated Creativity (
animatedcreativity) on CodePen.

Xem thêm: Bột Ngọc Trai Đắp Mặt Nạ Ngọc Trai Có Tốt Không ? Công Dụng Làm Đẹp Của Ngọc Trai Và Bột Ngọc Trai

Nguồn

jQuery.countdown example

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