Maison > Article > interface Web > javascript changer l'arrière-plan

javascript changer l'arrière-plan

WBOYoriginal: 2023-05-10 09:58:36989parcourir

Dans la conception Web d’aujourd’hui, les images d’arrière-plan sont un élément de conception important. Cela peut non seulement ajouter de la beauté au site Web, mais également le rendre plus personnalisé, mettre en valeur le thème du site Web et attirer plus d'utilisateurs. Eh bien, parmi ceux-ci, le rôle de JavaScript ne peut être ignoré. Cet article explique comment modifier l'arrière-plan via JavaScript pour répondre aux besoins de différents sites Web.

1. Utilisez JavaScript pour changer la couleur d'arrière-plan via des boutons

Tout d'abord, nous pouvons utiliser le mécanisme de liaison d'événements de JavaScript pour changer la couleur d'arrière-plan de la page Web en cliquant sur un bouton.

On peut d'abord définir un bouton et un div du corps de la page dans le fichier HTML. Ce div représente le corps de la page. Le code est le suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript 改变背景</title>
        <style>
            #main {
                width: 100%;
                height: 100%;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <button onclick="changeColor()">改变背景颜色</button>
        <div id="main">
            <h1>欢迎来到我的博客</h1>
            <p>在这里，你可以了解最新的技术资讯，还可以和其他科技爱好者交流想法。</p>
        </div>
        <script>
            function changeColor() {
                var main = document.getElementById("main");
                main.style.backgroundColor = "teal";
            }
        </script>
    </body>
</html>

. Dans le code ci-dessus, nous définissons un bouton et un corps div. La couleur d’arrière-plan du corps div est initialisée en gris. Lorsque l'utilisateur clique sur le bouton, la fonction changeColor en JavaScript est appelée. Dans cette fonction, nous obtenons l'élément de la balise body div et changeons sa couleur d'arrière-plan en bleu sarcelle.

De cette façon, nous pouvons réaliser des changements de couleur simples, mais la couleur ne peut être modifiée qu'une fois à la fois et des effets dynamiques ne peuvent pas être obtenus.

2. Changez la couleur d'arrière-plan de la page via la méthode setInterval

Nous pouvons utiliser la méthode setInterval de JavaScript pour changer la couleur d'arrière-plan de la page, et utiliser une minuterie pour que la couleur d'arrière-plan change Effet dynamique. Le code est le suivant :

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript改变背景</title>
        <style>
            #main {
                width: 100%;
                height: 100%;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <button onclick="changeBackgroundColor()">改变背景颜色</button>
        <div id="main">
            <h1>欢迎来到我的博客</h1>
            <p>在这里，你可以了解最新的技术资讯，还可以和其他科技爱好者交流想法。</p>
        </div>
        <script>
            function changeBackgroundColor() {
                setInterval(function() {
                    var main = document.getElementById('main');
                    main.style.backgroundColor = getRandomColor();
                }, 1000);
            }

            function getRandomColor() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
            }
        </script>
    </body>
</html>

Dans ce code, nous définissons deux fonctions. La fonction changeBackgroundColor appelle la fonction getRandomColor toutes les secondes via la méthode setInterval pour obtenir une couleur aléatoire et l'appliquer à l'arrière-plan de l'élément div. La fonction

getRandomColor générera aléatoirement une valeur de couleur et renverra une chaîne représentée par une valeur RVB. Après chaque appel à la fonction getRandomColor, la couleur de fond de la page changera de manière aléatoire. La combinaison de ces deux fonctions peut obtenir un effet de changement de couleur aléatoire sur la page.

3. Changez l'image d'arrière-plan en fonction de l'heure et de la date

Nous pouvons utiliser l'heure et la date pour modifier l'image d'arrière-plan de la page Web, ce qui peut obtenir un style de thème plus intéressant . La méthode d'implémentation spécifique est la suivante :

<!DOCTYPE html>
<html>
    <head>
        <title>Javascript改变背景</title>
        <style>
            #main {
                width: 100%;
                height: 100%;
                background-image: url('https://picsum.photos/1024/768');
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <h1>欢迎来到我的博客</h1>
            <p>在这里，你可以了解最新的技术资讯，还可以和其他科技爱好者交流想法。</p>
        </div>
        <script>
            var today = new Date();
            var hourNow = today.getHours();

            if (hourNow > 18) {
                document.getElementById("main").style.backgroundImage = "url('https://picsum.photos/1024/768?image=593')";
                document.getElementById("main").style.backgroundSize = "cover";
            } else if (hourNow > 12) {
                document.getElementById("main").style.backgroundImage = "url('https://picsum.photos/1024/768?image=550')";
                document.getElementById("main").style.backgroundSize = "cover";
            } else if (hourNow > 0) {
                document.getElementById("main").style.backgroundImage = "url('https://picsum.photos/1024/768?image=544')";
                document.getElementById("main").style.backgroundSize = "cover";
            } else {
                document.getElementById("main").style.backgroundColor = "black";
            }
        </script>
    </body>
</html>

Ce code modifiera l'image de fond de la page en fonction du moment actuel. Si l'heure actuelle est après 18 heures, l'image d'arrière-plan sélectionnera l'image avec l'identifiant 593. Si l'heure actuelle est entre midi et 18 heures, l'image avec l'identifiant 550 sera sélectionnée. Si l'heure actuelle est tôt le matin, alors. l'image avec l'ID 550 sera sélectionnée. Image avec l'ID 544.

Grâce à l'objet date et heure de JavaScript, nous pouvons facilement obtenir cet effet et rendre le site Web plus personnalisé.

Pour résumer, grâce à JavaScript, nous pouvons obtenir les effets de changer la couleur d'arrière-plan des pages Web, de changer dynamiquement les couleurs de manière aléatoire et de changer les images d'arrière-plan en fonction de l'heure et de la date. Ces méthodes nous permettent de mieux répondre à nos propres besoins en matière de conception de sites Web, d'améliorer la personnalisation et l'attractivité des pages Web, d'améliorer l'expérience utilisateur et de générer plus de trafic et de revenus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Combien de types de boucles existe-t-il en javascript ?Article suivant：Combien de types de boucles existe-t-il en javascript ?

Articles Liés

Voir plus