Bài tập javascript – di chuyển khối div bằng nút button

2
3041

Xin chào tất cả bà con 😀 trong loạt bài viết này, tôi sẽ hướng dẫn các bạn làm thật nhiều bài tập javascript. Cụ thể ở đây là tất cả những  hiệu ứng bay lượn, ảo lòi mà các bạn thấy trên những trang web chất chơi bây giờ ấy :D, mình sẽ làm tất cả bằng javascript. Yêu cầu của mình cũng đơn giản thôi, bạn chỉ cần nắm được những kiến thức cơ bản của javascript là được rồi :D. Nếu chưa thì xem lại những bài viết về kiến thức cơ bản của mình nhé :v. Chúng ta sẽ đi vào bài tập đầu tiên đó là di chuyển khối div khi click vào nút button.

Bài tập javascript

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

  1. Biến
  2. Mảng
  3. Hàm
  4. Event
  5. HTML DOM

Bài tập javascript đầu tiên: Di chuyển khối div khi click vào nút button.

Demo: 

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

Mình sẽ code và phân tích chi tiết từng đoạn code ở dưới.

Code HTML:

Code CSS:

Code JS:

Thay đổi class “move” bằng animation làm bằng cái này thì nó sẽ có nhiều chuyển động hơn, tất nhiên là đẹp hơn rồi. Nhưng mà animation cần phải xử lý thêm để có thể tạo chuyển động 2 chiều mình sẽ viết về nó trong bài viết tiếp theo.

Chúng ta quay trở lại với đoạn code Javascript ở ví dụ trên:

  1. Mình sử dụng phương thức document.addEventListener("DOMContentLoaded",function(){ //đặt mã trong này },false) để chống lỗi khi trang web chạy. Đây là một cú pháp các bạn chỉ cần nhớ là ok.
  2. Truy xuất button và div bằng phương thức document.querySelectorAll()
  3. Tạo event onclick cho button bằng function anonymous
  4. Thêm class “move” cho div
  5. Vào chỉnh css cho class “move” là ổn rồi :v.

Khi chúng ta sử dụng transition nếu dùng classList.toggle thì sẽ thực hiện được 2 chiều. Có nghĩa là khi bạn click vào button khối div di chuyển đến vị trí bạn đã đặt, click 1 phát nữa nó quay lại chỗ cũ. Còn animation thì không dễ dãi như vậy, chúng ta cần code thêm vài tí nữa cơ.  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.

0 0 vote
Đánh giá bài viết
Subscribe
Notify of
guest
2 Bình luận
Inline Feedbacks
View all comments