programming javascript

Bài tập html css javascript

Trang chủ
Bài tập & hướng dẫn
Bài tập HTML & HTML5

Bài tập HTML & HTML5 cơ bản

Bài tập HTML & HTML5 giúp bạn củng cố lại bài đã học, bài tập được sắp xếp theo thứ tự độ khó tăng dần, và sẽ còn được cập nhật.

Bài tập HTML & HTML5 nâng cao

Bài tập HTML & HTML5 nâng cao, giúp bạn làm quen với nhiều mẫu design hiện nay.

Xin chào các bạn, ngày hôm nay mình sẽ bắt đầu một series về những bài tập Html, css, javascript đơn giản. Hi vọng các bạn sẽ thích series này của mình. 😀 Bài đầu tiên thì mình sẽ hướng dẫn các bạn code một bảng màu khi hover như hình minh họa dưới đây

Trông thú vị phải không các bạn. Vậy làm thế nào để code được một bảng hover đầy màu sắc như này. Rất đơn giản và chỉ cần 3 file html, css, javascript rất ngắn gọn thôi.

Html

Đầu tiên thì ta cần phải tạo file index.html

Chỉ cần 1 thẻ

và có class với id là container, và việc còn lại là của file css và file js.

Javascript

Tạo một file script.js như đã khai báo trong file html. Và trong file script.js sẽ có đoạn code như dưới đây:

Tạo một const để lấy DOM container ở html. Từ thẻ DOM này ta sẽ for để thêm từng thẻ

là từng ô vuông. Add thêm sự kiện hover vào thì sẽ setColor thẻ

đấy và khi hover ra thì sẽ removeColor thẻ

Css

Tạo file style.css:

File css sẽ style cho container bên ngoài và từng ô vuông nhỏ có class là “square” Và thế là xong một project nho nhỏ để make color với bạn bè rồi phải không nào =]] Mình khuyến khích các bạn tự gõ lại để biết được từng dòng sẽ có chức năng gì. Hoặc có thể download source code tại đây. Chúc các bạn ngày làm việc hiệu quả và đừng quên tham gia nhóm để trao đổi học hỏi thêm nhiều điều mới mẻ nhé!

Truy cập nhanh

[Truy cập nhanh trên thiết bị di động bằng cách quét mã QR]

Tiện ích

Học sinh nộp bài tập tại đây.

Trường THPT Chuyên Nguyễn Đình Chiểu

Bộ Giáo dục và đào tạo

E-LEARNING

Mạng Giáo dục

Trường học kết nối

Đóng góp ý kiến

Hãy gửi ý kiến đóng góp, liên hệ tại đây.

[Vui lòng quay lại sau!]

Tổng số lượt truy cập

Bộ đếm chặng

567.449

Cập nhật lúc 22h,25/02/2018.