logo

Đang load dữ liệu

logo devmaster

VIỆN CÔNG NGHỆ VÀ ĐÀO TẠO DEVMASTER

Đào tạo - Phần mềm - Cho thuê nhân sự

  • 0969.609.003
  • 0978.611.889
  • Trang chủ
  • Các khoá đào tạo
    • Chuyên đề WEB - PHP

      • Lập trình web với HTML5 - CSS3- JQuery - Bootstrap - Ajax - [36 giờ]
      • Lập trình web frontend - reactjs - [75 giờ]
      • Lập trình web với mã nguồn mở PHP&MYSQL - PHP FRAMEWORK [126 giờ]

      Chuyên đề Mobile

      • Lập trình Games/Apps trên nền tảng Android - [120 giờ]
      • Lập trình Games/Apps trên nền tảng IOS - [120 giờ]

      Chuyên đề JAVA

      • Ngôn ngữ lập trình hướng đối tượng với java - [40 giờ]
      • Lập trình ứng dụng với java - [100 giờ]
      • Lập trình web site với java framework (JPA, HIBERNATE, SPRING MVC, SPRINGBOOT) - [276 giờ]

      Chuyên đề NETWORK/SECURITY

      • Khoá học Quản trị hạ tầng mạng CCNA v6 - [72 giờ]
      • Khoá học quản trị hệ thống với Windows SERVER 2012- [72 giờ]
      • Chuyên gia bảo mật hệ thống CompTIA + - [110 giờ]

      Chuyên đề .NET

      • Nền tảng lập trình hướng đối tượng với C# - [40 giờ]
      • Lập trình ứng dụng WINDOWS FORM - [100 giờ]
      • Lập trình Web với ASP.NET MVC 5, WebAPI - [145 giờ]

      Chuyên đề khác

      • Ngôn ngũ lập trình C/C++ - [80 giờ]
  • Lập trình cho trẻ em
  • Dịch vụ
    • Đào tạo theo như cầu
    • Cung cấp thiết bị - Phần mềm
    • Tư vấn - Thiết kế mạng hạ tầng
    • Tư vấn - Triển khai dịch vụ mạng
    • Tư vấn - Tư vấn, triển khai giám sát hệ thống
    • Thực tập dự án
  • Lịch khai giảng
  • Tin tức
    • Tin tức và sự kiện
    • Tin hoạt động
    • Tin công nghệ
    • Hội thảo, workshop, Codecam
    • Thông tin việc làm
    • Cẩm nang chia sẻ kiến thức
  • Tiện ích
  • Liên hệ

Cẩm nang chia sẻ kiến thức

Sep - 2020

21

Hướng dẫn code chức năng đổi màu nền ngẫu nhiên với Javascript

Cẩm nang chia sẻ kiến thức

 

Hello xin chào các bạn, lâu lắm rồi mình chưa viết bài mới cho blog, vì lâu nay mình đang suy nghĩ tìm chủ đề mới để viết cho blog để giúp các bạn học hỏi, cải thiện trình độ và hôm nay mình đã tìm ra một chuyên mục mới cho blog của mình đó chính là Javascript thực chiến nghĩa là thay vì viết những bài về kiến thức cơ bản thì mình sẽ làm các bài như là hướng dẫn code chức năng tab, autocomplete, scroll fixed, toggle menu, slider…

Là những vấn đề khi đi làm mà các bạn sẽ hay gặp phải, làm sao để phân tích vấn đề, đưa ra giải pháp và để code nó thì series này mình sẽ cố gắng chia sẻ nhiều cho các bạn luôn. Và bài đầu tiên của series này chính là hướng dẫn code chức năng đổi màu nền ngẫu nhiên trước nhé.

Đề bài

Cho một danh sách màu sắc bất kỳ, khi nhấn vào một nút button ở ngoài giao diện thì màu nền của trang web sẽ đổi ngẫu nhiên(random) trong danh sách màu sắc đã cho từ trước

Giao diện HTML CSS

Về giao diện thì chúng ta chỉ cần tạo HTML đơn giản mà thôi với một button có class button-random và CSS thêm một chút như sau:

 

 

 

Và ta sẽ có kết quả đơn giản như này:

 

 

Javascript Code

Việc đầu tiên chúng ta cần làm đó chính là khai báo các biến cần sử dụng, ở đây mình đặt một biến có tên là colors là một mảng sẽ chứa danh sách các màu bất kỳ như sau:

 

 

Tiếp đến mình khai báo thêm 1 biến để chứa cái button-random để chúng ta thêm sự kiện nhấn vào cho nó sau này với phương thức document.querySelector  để lấy ra một phần tử trong DOM (Document Object Model).

 

 

Phần khai báo đã xong, bây giờ chúng ta sẽ thêm sự kiện nhấn vào nút button này bằng phương thức addEventListener và sự kiện truyền vào sẽ là click, khi nhấn vào nút thì lúc này chúng ta cần có giải pháp để lấy màu ngẫu nhiên ra.

Để lấy giá trị trong mảng thì chúng ta sẽ truy xuất đến vị trí index của phần tử trong mảng ví dụ colors[0] thì sẽ lấy ra giá trị đầu tiên là #00aefd trong trường hợp này, thì để lấy ngẫu nhiên thì chúng ta sẽ sử dụng hàm Math.random(), hàm này sẽ trả về kết quả từ 0 đến 1 như 0,2 0,7… nhưng cái chúng ta muốn chính là lấy từ 0 cho đến chiều dài của mảng cho nên lúc này để có kết quả chính xác thì code của chúng ta phải là Math.random() * colors.length

Tuy nhiên con số khi ra đôi khi sẽ là 7,2 mà trong mảng nếu để colors[7,2] thì sẽ không đúng cho nên chúng ta cần làm tròn nó xuống bằng cách thêm một hàm khác bọc lại giá trị ở trên chính là Math.floor() sẽ làm tròn xuống ví dụ 7,2 sẽ thành 7, lúc này trở đi ta có thể dùng một biến có tên là randomColor để lấy ra màu ngẫu nhiên bằng đoạn code mà chúng ta phân tích nãy giờ như sau:

 

 

Sau khi lấy được mã màu rồi thì việc tiếp theo đơn giản chỉ cần thay đổi cho thẻ body bằng cách dùng đoạn code này

 

 

Như vậy là xong một chức năng đổi màu đơn giản rồi, ở dưới đây là tổng hợp code Javascript từ nãy đến giờ nhé

 

 

Tạm kết

Qua bài viết này, mình hi vọng sẽ giúp ích được cho các bạn phần nào trong việc học tập và thực hành với Javascript nhé, cũng như học thêm được cách phân tích vấn đề, các bước để làm ra kết quả như mong muốn, học cách lấy giá trị ngẫu nhiên trong một mảng với các hàm Math, ôn lại sự kiện click, gán giá trị vào style của DOM… Cuối cùng mình chúc các bạn một ngày an lành và vui vẻ. Nếu bài viết mình có gì sai thì các bạn góp ý giúp mình nhé.

Devmaster Academy via evondev.com

Các bài viết cùng chủ đề

BÍ QUYẾT HỌC LẬP TRÌNH CHO CÁC BẠN ĐẦU NĂM HỌC MỚI ❤
BÍ QUYẾT HỌC LẬP TRÌNH CHO CÁC BẠN ĐẦU NĂM HỌC MỚI...
5 Phương pháp hay để mở rộng các dự án React của bạn một cách dễ dàng
5 Phương pháp hay để mở rộng các dự án React của b...
Lab06.1 - Data Access In ASPNET MVC 5
Lab06.1 - Data Access In ASPNET MVC 5
Lab05 - Data Validation and Annotation In ASPNET MVC 5
Lab05 - Data Validation and Annotation In ASPNET M...
Lab 04 - Model in ASP.NET MVC 5 - Phần tự thực hành
Lab 04 - Model in ASP.NET MVC 5 - Phần tự thực hàn...
Lab 04 - Model in ASP.NET MVC 5 - Bài 4.2
Lab 04 - Model in ASP.NET MVC 5 - Bài 4.2

Các khóa đào tạo chuyên đề

Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
Lập trình ứng dụng trên nền tảng android Lập trình ứng dụng trên nền tảng android
Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack

Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
Lập trình ứng dụng với WINDOWS FORM Lập trình ứng dụng với WINDOWS FORM
Lập trình ứng dụng với JAVA (FORM) Lập trình ứng dụng với JAVA (FORM)
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
Lập trình frontend với reacjs (Full) Lập trình frontend với reacjs (Full)
Viện Công Nghệ Và Đào Tạo Devmaster

DEVMASTER ACADEMY

Địa chỉ: Tầng 6 - Tòa nhà VIỆN CÔNG NGHỆ
Số 25, Vũ Ngọc Phan - Láng Hạ - Đống Đa - Hà Nội

Hotline: 0969 609 003 | 0978 611 889

devmaster.contact@gmail.com

hna.tvchung@gmail.com

CÁC KHÓA HỌC CHUYÊN ĐỀ

  • Thiết kế và lập trình Website PHP, Laravel chuyên nghiệp - FullStack
  • Lập trình ứng dụng trên nền tảng android
  • Lập trình Ứng dụng với Công nghệ ASP.NET Core MVC, WebAPI, ReactJS - FullStack
  • Lập trình ứng dụng với WINDOWS FORM
  • Lập trình ứng dụng với JAVA (FORM)
  • Thiết kế và lập trình Ứng dụng với công nghệ Java (Java Framework springBoot, hibernate,...) - FullStack
  • Thiết kế và lập trình website với công nghệ HTML5, CSS3, Javascript, Bootstrapt 4, Jquery
  • Lập trình frontend với reacjs (Full)
Viện Công Nghệ Và Đào Tạo Devmaster

VIỆN CÔNG NGHỆ VÀ ĐÀO TẠO DEVMASTER - Học thực tế * Làm thực tế * Cam kết việc làm
Copyright by Ⓒ DEVMASTER 2015