Bài tập javascript – di chuyển khối div bằng nút button
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.
Kiến thức cần có:
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bài tập js đầu tiên</title> </head> <body> <button style="margin-top:2px">Click me</button> <!-- Nút button --> <div class='card'> <h2 style="text-align: center; "> Chạy xa em </h2> </div> <!-- Nội dung khối div --> </body> </html> |
Code CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.card{ display: flex; align-items: center; justify-content: center; width:400px; height:200px; border: 2px solid green; transition: 1s; } /*css của khối div*/ .move{ transform: translateX(400px); transition: 1s; } /*css của khối div khi click vào button*/ |
Code JS:
|
1 2 3 4 5 6 |
document.addEventListener("DOMContentLoaded",function(){ var nut = document.querySelectorAll('button'); var khoi = document.querySelectorAll('div'); nut[0].onclick = function(){ khoi[0].classList.toggle('move');} },false) |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.move{ animation:dichuyen 1s forwards; } @-webkit-keyframes dichuyen{ from{transform: translateX(0);}; to{transform: translateX(400px);}; } //Hoặc .move{ animation:dichuyen 1s forwards; } @-webkit-keyframes dichuyen{ 0%{transform: translateX(0);margin-top: 0px;opacity: 1} 50%{transform:translateX(400px);margin-top: 0px;opacity: 1;} 80%{transform:translateX(400px);margin-top: 400px;opacity: 0;} 100%{transform:translateX(400px);margin-top: 400px;opacity: 0;} } |
Chúng ta quay trở lại với đoạn code Javascript ở ví dụ trên:
- 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. - Truy xuất button và div bằng phương thức
document.querySelectorAll() - Tạo event onclick cho button bằng function anonymous
- Thêm class “move” cho div
- 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.
