Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

Thay đổi màu background bằng Javascript

@devnavDec 09, 20204 min read...

Giới thiệu

Hello các bạn, hôm nay mình sẽ hướng dẫn các bạn thực hiện 1 project Javascript, đó là project thay đổi màu background ngẫu nhiên bằng javascript nhé. Bắt tay vào thực hiện thôi nào !!!

Đề bài

Cho một danh sách các color tùy ý và một button. khi nhấn vào nút button này thì background sẽ đổi màu ngẫu nhiên với danh sách các màu đã cho trước.

Thực hành

Về giao diện HTML/CSS thì các bạn có thể tự design sao cho hợp với ý các bạn nhé. ở đây mình sẽ làm 1 giao diện đơn giản, các bạn theo dõi đoạn code bên dưới nhé.

Mình sẽ tạo một button có class là btn-random <button class="btn-random">Click me!</button> Và thêm 1 chút CSS để style cho button nhé

.btn-random {
    color: #141E51;
    background: #fff;
    padding: 7px 20px;
    font-weight: 700;
    border-radius: 25px;
    transition: all 0.4s;
    cursor: pointer;
    text-align: center;
    border: none;
    display: block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
}
.btn-random:focus {
  outline: none;
}

Về phần HTML:

<body>
    <div class="background">
        <button class="btn-random">Click me</button>
    </div>

    <script src="main.js"></script>
</body>

Trong HTML mình có tạo một div có class là background mục đích để tạo background và căn giữa button. các bạn có thể sử dụng chính body để làm mà khỏi cần div background cũng được nhé 👌.

Thêm 1 ít style cho class background nào (màu mặc định của background là lightblue nhé ^^ )

.background {
    width: 100%;
    height: 100vh;
    background: lightblue;
    display: flex;
    justify-content: center;
    align-items: center;
}

Ta được giao diện sau: f470e02a8107996432a8693c9b475e52

Và ta chuyển tới phần chính là Javascript nhé, mình sẽ đi chi tiết từng dòng code cho các bạn dễ hiểu nhé:

Đầu tiên muốn đổi được màu background ta phải gán sự kiện click vào button này, để nó có thể click và thực hiện đổi màu cho background, mình dùng querySelector + tên class muốn lấy và gán vào biến button.

Sau đó gán sự kiện 'click' cho button và tạo 1 function có tên là changeColor để làm background đổi màu nhé.

const button = document.querySelector('.btn-random');

button.addEventListener('click',changeColor);
Chi tiết hàm changeColor:

function changeColor(){
    const background = document.querySelector('.background');
    const arrayColor = ['red','yellow','pink','gray','black','orange','blue'];
    let random = arrayColor[randomColor(arrayColor)];
    background.style.backgroundColor = random;
    // console.log(random);
}
function randomColor(array){
    return Math.floor(Math.random()*array.length);
}

Trong hàm này mình sẽ gọi để div background để thực hiện đổi màu cho nó, và màu sắc thì tùy ý các bạn chọn nhé, và ở đây mình đã tạo 1 mảng để lưu trữ những color này.

Ý tưởng ở đây là mình sẽ random màu sắc trong mảng thông qua Index của mỗi màu trong mảng. lấy index ngẫu nhiên sau mỗi click vào button như nào ? điều này rất đơn giản mình sẽ sử dùng hàm random của Javascript.

function randomColor(array){
    return Math.floor(Math.random()*array.length);
}

Hàm random này sẽ trả về một số ngẫu nhiên trong khoảng (0,1) ví dụ 0.98, 0,56 ... Và để làm tròn số thì mình sẽ dùng hàm floor để làm tròn thành số nguyên nhỏ nhất gần số truyền vào.

Để lấy chiều dài của mảng color thì ta dùng phương thức length. kết quả ta sẽ được một số nguyên trong khoảng (0, 7) tương ứng với index từng màu trong mảng.

Và cuối cùng sau khi lấy được giá trị màu ta chỉ việc thực hiện thay đổi cho background thôi.

Một lưu ý nho nhỏ ở đây là style in Javascript ta sẽ không dùng "-" trong style mà ta sẽ dùng kiểu camelCase như này: backgroundColor (thay vì dùng background-color ).

Cách làm tương tự như trên cũng được áp dụng vào trang memonngon.com - hôm nay ăn gì?, các bạn khi đã hiểu rồi thì có thể tự mình tạo ra những chức năng tương tự ở trên nhé ^^.

Bài viết tương tự:

Tạm kết

Như vậy là mình đã hướng dẫn các bạn cách đổi màu background bằng Javascript rồi 😁.

Trong thời gian tới mình sẽ làm thêm các project bằng javascript để các bạn có thể tham khảo nhé. Chúc các bạn học vui vẻ. peace!

TABLE OF CONTENTS

Thay đổi màu background bằng Javascript

Giới thiệu

Đề bài

Thực hành

Tạm kết