Bài tập Javascript 3 – Viết hiệu ứng tương tác như facebook

0
445

bài tập javascript 3 này, chúng ta sẽ học cách tạo hiệu ứng tương tác như facebook bằng javascript. Nghe nguy hiểm vậy thôi chứ thực ra chúng ta sẽ đi từ cái dễ trước, cái khó để đó dành cho bài sau :D. Ok mình sẽ bắt đầu luôn.

bài tập javascript 3

 

Kiến thức cần có:

  1. Biến
  2. Câu lệnh if else
  3. Mảng
  4. Hàm
  5. Event
  6. HTML DOM

Bài tập javascript 3: Tạo hiệu ứng tương tác như facebook

Mô tả bài tập: Click 1 lần vào icon nội dung bung ra , click lần nữa nội dung ẩn đi .Mình sẽ code và giải thích chi tiết ngay phía sau.

Demo:
Click vào bài tập js 3 để xem kết quả.

Mình xin 5 phút quảng cáo nha =))

Mình sẽ code và phân tích chi tiết ngay phía sau.

Code: html

Code: CSS

Kết quả:

bài tập javascript 3

Làm tạm thế này cho nhanh, chứ làm kĩ mình làm còn đẹp hơn cả facebook ấy chứ. Lưu ý là khối noidung sẽ ẩn đi  vì mình để display:none mà. Bây giờ chúng ta cần code js để khi click vào sẽ hiện khối noidung ra, click lần nữa thì ẩn đi.

Code: Javascript

File js :

  • Khởi tạo biến “icon” để truy xuất phần tử icon ở đây mình sử dụng phương thức querySelectorAll để truy xuất
  • Khởi tạo biến “noidung” để truy xuất phần tử div có class = “noidung”
  • Khởi tạo biến “trangthai” gán giá trị ban đầu là “click1” để đặt điều kiện cho câu lệnh if
  • Tạo sự kiện onclick cho icon bằng function anonymous
  • Trong function anonymous mình thực hiện lệnh if  else có ý nghĩa : mà thôi mình giải thích cái này ở bài trước rồi còn gì, tương tự thôi 😀

this.style.color = “white” : Làm cái icon tam giác biến thành màu trắng khi bạn click lần 1

noidung[0].style.display = “block”: Hiện thị ra cái div “noidung” thôi

this.style.color = “black” : Làm cái icon tam giác biến thành màu đen khi bạn click lần 2

noidung[0].style.display = “block”: Ẩn cái div “noidung” đi.

Cái này học trong DOM rồi ai mà không biết thì xem lại kiến thức cơ bản nha, bài tập javascript 3 này chúng ta cũng có thể làm bằng classList.toggle()  các bạn nên làm bằng cả 2 cách.

Okê xong !! Chúng ta đã có thể viết được hiệu ứng của 1 trang web có giá trị lên đến 100 tỷ USD :v ghê không hihihi.

Mình sẽ quay trở lại với những bài tập chất chơi hơn ! Mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

 

avatar
  Subscribe  
Notify of