Linear-gradient changer toute les x second l'angle

Résolu/Fermé

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - 1 janv. 2022 à 18:30
firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 - 2 janv. 2022 à 11:29

Bonjour,

Voila j'ai fais un code pour changer l'angle de linear-gradient en javascript mais voila le code ne fonctionne pas comme je veux. J'ai regarde des codes sur internet mais aucun ne fonctionne

Je vais expliquer ce que j'attendais de mon code, je voulais que toute les 1 seconde, l'orientation augmente de 1 et que une fois arrivé a 360, la variable revienne a 1.Cela devrait affecte sur l'arrière plan de body.

Voici le code javascript :

setTimeout("change_angle()", 1000)
function change_angle(){
    var angle = 1;
    if(angle<360){
        angle = 1;
    }
    var body = document.getElementById('body').style.background = 'linear-gradient('+angle+'deg, red, blue) no-repeat';
    angle = angle + 1;
}

Si vous voulez plus d'explication ou des questions, n'hésiter pas .

Merci, FirPic

A voir également:

Linear-gradient changer toute les x second l'angle
Changer dns - Guide
Changer clavier qwerty en azerty - Guide
Changer carte graphique - Guide
Direct x runtime - Télécharger - Pilotes & Matériel
Changer extension fichier - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 novembre 2024 4 704
Modifié le 1 janv. 2022 à 19:55

Bonjour
Là, ton code ne s'exécute qu'une fois au bout d'une seconde...
Il faudrait remettre une tempo à la fin de ta fonction...

setTimeout(change_angle, 1000);
function change_angle(){
    var angle = 1;
    if(angle<360){
        angle = 1;
    }
    var body = document.getElementById('body').style.background = 'linear-gradient('+angle+'deg, red, blue) no-repeat';
    angle = angle + 1;
    setTimeout(change_angle, 1000); //on relance au bout d'une seconde
}

Ou, plus simple, utiliser la fonction detinterval
https://developer.mozilla.org/en-US/docs/Web/API/setInterval

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1
1 janv. 2022 à 21:08

Merci,

J'ai essaye de faire comme vous me l'avez dis en essayant avec des interval, j'ai adapte le code de la page pour ma page mais cela ne fonctionne. Ainsi que si on rajoute le setTimeout.

voici le nouveau code:

let intervalChangeAngle;
if(!intervalChangeAngle){
    intervalChange = setInterval(change_angle, 100);
}
var angle = 212;
function change_angle(){
    if(angle<360){
        angle = 212;
    }
    var body = document.getElementById('body').style.background = 'linear-gradient('+angle+'deg, red, blue) no-repeat';
    angle = angle + 1;
}

jordane45 Messages postés 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 novembre 2024 4 704 > firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022
1 janv. 2022 à 22:15

Avec si peu de code .. impossible de savoir ce qui bloque ...

Il faudrait nous montrer ton code COMPLET ( HTML ET JS )

De plus, regarde dans la CONSOLE de ton navigateur si il n'y a pas des erreurs....
N'hésites pas non plus à ajouter des console.log dans ton code pour essayer de voir ce qui se passe dans ton code... ainsi que les valeurs de tes variables...

PS: Ton code actuel me semble étrange...
En gros.. si l'angle est plus petit que 360 ... tu le fixes à 212 ( donc plus petit que 360...)
De ce fait.. il restera toujours à cette valeur de 212...

firpic Messages postés 90 Date d'inscription jeudi 3 juin 2021 Statut Membre Dernière intervention 20 décembre 2022 1 > jordane45 Messages postés 38290 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 18 novembre 2024
2 janv. 2022 à 11:29

Merci,
c'était une grossière erreur de ma part, je me suis trompe de signe < et >.
Maintenant cela fonctionne parfaitement.

Pour ceux qui voudront faire la meme chose que moi voici le code :

JavaScript:

let intervalChangeAngle;
if(!intervalChangeAngle){
    intervalChange = setInterval(change_angle, 100);
}
var angle = 1;
function change_angle(){
    if(angle>360){
        angle = 1;
    }
    var body = document.getElementById('body').style.background = 'linear-gradient('+angle+'deg, red, blue) no-repeat';
    angle = angle + 1;
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body id="body">
    
</body>
</html>

Discussions similaires

Dimensions L x l x H : comment lire ces infos ?

Mettre Facebook Messenger en français

Pokémon X et Y : comment effacer une partie ?