Code đếm ngược thời gian javascript
Bài viết từ bây giờ chúng ta sẽ với mọi người trong nhà đi vào tò mò cách tạo đồng hồ thời trang đếm ngược (countdown timer) nhé. Trong website thì nó hay được sử dụng đa phần cho việc đếm thời gian còn lại của các chương trình khuyến mãi, thời gian giới thiệu sản phẩm mới, sự kiện sắp tới được tổ chức... Mà bạn có nhu cầu thông báo cho khách hàng. Cùng để hiểu rõ hơn chúng ta hãy cùng cả nhà đi vào khám phá nhé!
Đầu tiên khi ước ao xây dựng một thứ nào đấy thì bạn cần tạo một kết cấu HTML mang đến nó. Do đó bạn coi đoạn code sau đây để thấy được các phần tử HTML gồm trong Countdown timer nhé:
haycuoilennao19) on CodePen.
Bạn đang xem: Code đếm ngược thời gian javascript
Bước tiếp theo sau là chúng ta cần tô điểm lại thành phần nút (button) vào HTML bởi đoạn mã CSS dưới đâ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à tác dụng bạn xem dưới đây nhé:
See the Pen Them code css mang đến countdown timer by haycuoilennao19 (
haycuoilennao19) on CodePen.
Việc tiếp theo họ cần có tác dụng là ẩn đi phần đông số đếm ngược này lại thông qua trực thuộc tính overflow: hidden.
.countdown line-height: 1; position: relative; display: block; overflow: hidden; margin-left: 6px; width: 33px; height: 24px; .numbers position: absolute; top: 0; left: 0; text-align: center; transition: 0.3s ease transform; text-indent: 0; .reset font-size: 12px; padding: 8px 16px; margin: 100px tự động 0; body display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #3ca8de; Và tác dụng ở sau đây nhé:
See the Pen An so trong coundown timer css by haycuoilennao19 (
haycuoilennao19) on CodePen.
Tiếp theo bọn họ cần phải sử dụng Javascript để xây dựng tính năng cho countdown timer. Đầu tiên họ sẽ tạo nên các biến để mang các thành phần HTML quan trọng như là class countdown, number, reset và biến hóa để lưu tin tức về số đếm cũng giống như giá trị boolean để xác minh 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ó chú ý là nằm trong tính countdownArea.getBoundingClientRect().height sẽ giúp chúng ta có thể tính toán được chiều cao các con số của bọn chúng ta. Vậy tại sao bọn họ cần rước chiều cao của những con số để triển khai gì?
Như các bạn thấy hình ảnh ở bên trên thì đấy là quá trình khi chúng ta chưa sử dụng thuộc tính overflow: hidden; mang lại class countdown. Việc họ lấy chiều cao của những con số để thống kê giám sát giá trị offset giúp hiển thị đúng số mà họ mong hy vọng bằng thuộc tính transform trong CSS. Cùng để hiểu rõ hơn chúng ta xem đoạn code tiếp theo tiếp sau đâ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ý về cách hoạt động của đoạn mã trên là:Chúng ta sẽ đội giá trị cho thay đổi countSau đó họ sẽ thực hiện count và height để rất 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 quý hiếm offset mới thông qua thuộc tính transform vào CSSCuối cùng chúng ta dùng câu lệnh if(count >= 10) để dừng lại hàm khi cực hiếm count đạt đến 10.
Và phía trên là tác dụng 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ợ hãi nó vẫn chạy ngay lúc load trang yêu cầu bạn cần mẫn nhấn vào chữ "Run Pen" để thấy tác dụng nha. Việc cuối cùng bọn họ cần có tác dụng là tùy chỉnh chức năng reset mang lại countdown timer (tự động chạy lại khi người tiêu dùng nhấn vào nút reset). Và để rest lại những thuộc tính về thuở đầu thì bạn xem đoạn mã sau nhé:
clearInterval(interval); count = 0;numbersArea.style.transform = "translateY(0)"Dưới đó là đoạn mã Javascript hoàn chỉnh khi bọn họ thêm tính năng reset mang đến 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à công dụng cuối cùng của họ là:
See the Pen them chuc nang reset đến countdown timer by haycuoilennao19 (
haycuoilennao19) on CodePen.
Và đó là nguồn tham khảo của chính bản thân mình nhé: countdown timer
Trước khi bước vào ví dụ thì mình có một số để ý sau là giúp xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay trường hợp nó không hiển thị thì các bạn nhớ xác minh bản thân là bé người trong Codepen new xem được nhé. Nếu tệp tin là SCSS thì bạn có thể chuyển thanh lịch CSS tại đây nhé : SCSS lớn CSS. Nếu họ muốn xem các nguồn được áp dụng trong Codepen để bạn cấu hình thiết lập ở dưới máy tính xách tay thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem những đường dẫn CDN nha.
Xem thêm: Cách Tìm Kiếm Bằng Hình Ảnh Nâng Cao Với Google, Tìm Kiếm Nâng Cao Trên Google
Draft Countdown
Dưới phía trên là kết quả trên Codepen nha.
See the Pen Draft Countdown by Dorian Camilleri (
doriancami) on CodePen.
Pure CSS SVG Countdown (Ready)
Dưới trên đây là tác dụng trên Codepen nha.
See the Pen Pure CSS SVG Countdown (Ready) by Nikolay Talanov (
suez) on CodePen.
Javascript Countdown
Dưới trên đây là hiệu quả trên Codepen nha.
See the Pen Javascript Countdown by Glauber Sampaio (
glaubersampaio) on CodePen.
Countdown Timer
Dưới đây là kết quả trên Codepen nha.
See the Pen Daily UI #014: Countdown Timer by Fabio Ottaviani (
supah) on CodePen.
Chuyên mục: Domain Hosting
