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

2
930

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.

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Nguyễn Văn Hiếunguyễn an Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
nguyễn an
Guest
nguyễn an

Chào a, cho e hỏi chỗ nut[0].onclick: sao phải thêm [0] vào v a…E cảm ơn trước

Nguyễn Văn Hiếu
Admin
Nguyễn Văn Hiếu

var nut = document.querySelectorAll(‘button’); trả về một array bạn nhé.
Mình chỉ muốn viết sự kiện cho button đầu tiên thì thêm chỉ số 0 vào, trong bài này thì chỉ có 1 button nên để hay không để cũng như nhau. Nếu bỏ chỉ số đó thì tất cả các button của web đều có sự kiện click. Trên thực tế khi làm web thì bạn nên chỉ định class hoặc id cho button, rồi select theo id hoặc class thì sẽ tốt hơn.