Hướng Dẫn Tạo Chức Năng Auto Night Mode Khi Về Đêm Cho Blogspot

Heloo các bạn, hôm nay lại có trò mới cho anh em nghịch rồi đây.

Đấy là tự động đổi nền  blogspot sang night mode chống mỏi mắt từ 18h chiều cho tới 6h sáng hôm sau.

Demo:

Và đây là hướng dẫn:

Đầu tiên, các bạn vào Chủ đề -> Chỉnh sửa HTML. Tìm code </body> và dán code này lên ngay bên trên nó:

<script>

    function SiinDz() {

        var currentTime = new Date().getHours();

        if (0 <= currentTime&&currentTime < 6) {

            <!-- js tùy chỉnh của bạn -->

        }

        if (18 <= currentTime&&currentTime < 24) {

            <!-- js tùy chỉnh của bạn -->

        }

    }

    SiinDz();

</script>

 Ở đây, mình cho night mode có tác dụng từ 18h chiều tới 6h sáng nên dùng 2 thẻ if.
Ở phần <!-- js tùy chỉnh của bạn --> chính là nơi mà bạn sẽ dùng DOM trong js để thay đổi css của các phần tử.

Ví dụ ở đây mình sẽ thay đổi background của body trong khoảng thời gian từ 18h chiều đến 6h sáng, code sẽ như này:

<script>

    function SiinDz() {

        var currentTime = new Date().getHours();

        if (0 <= currentTime&&currentTime < 6) {

            document.body.style.backgroundColor  = "#000";

        }

        if (18 <= currentTime&&currentTime < 24) {

            document.body.style.backgroundColor  = "#000";

        }

    }

    SiinDz();

</script>

phải để trong cả 2 thẻ if vì nếu bạn để trong 1 thẻ thì chỉ có 1 khoảng thời gian hoặc từ 18h - 24h hoặc từ 0h - 6h thay đổi mà thôi.

Còn mình muốn thay đổi màu của một phần tử có id là tuan chẳng hạn, sẽ làm như sau:

<script>

    function SiinDz() {

        var currentTime = new Date().getHours();

        if (0 <= currentTime&&currentTime < 6) {

            document.body.style.backgroundColor  = "#000";

document.getElementById("tuan").style.backgroundColor = "black";

        }

        if (18 <= currentTime&&currentTime < 24) {

            document.body.style.backgroundColor  = "#000";

            document.getElementById("tuan").style.backgroundColor = "black";

        }

    }

    SiinDz();

</script>

Vậy là xong rồi, code này sẽ rất đơn giản với các bạn đã biết về js và sẽ hơi khó hiểu một chút đối với các bạn chưa biết gì về js cả, nhưng đọc và ngẫm 1 lúc là sẽ hiểu ngay :D

Kết luận: chỉ với mấy dòng code js mà mình đã có thể làm cho blogspot lung linh hơn khi về đêm thì quá đẹp phải k nhỉ ^.^ 

Baca juga