Aller au contenu

Quelques exemples Javascript

Voici quelques exemples d'utilisation du Javascript pour vous aider dans le cours.

Horloge numérique

Horloge

HTML

<!--Lancement de l'horloge lorsque la page est chargée-->
<body onload="lancerHorloge()">
    <span id="texte">Il est présentement:</span>
    <p id="txtHeure"></p>

    <script src="script/horloge.js" defer></script>
</body>

JavaScript

function lancerHorloge()
{
    //Déclarations et extraction des heures, minutes, secondes
    let today=new Date();
    let heure=today.getHours();
    let minutes=today.getMinutes();
    let secondes=today.getSeconds();

    // ajouter le caractère 0 au nombres inférieurs à 10
    if (minutes<10)
    {
        minutes="0" + minutes;
    }
    if (secondes<10)
    {
        secondes="0" + secondes;
    }
    //Afficher l'heure dans la balise ayant l'identifiant txtHeure
    document.getElementById('txtHeure').innerText = heure + ":" + minutes + ":" + secondes;

    //Démarrer un chronomètre pour relancer l'affichage d'heure dans 0.5 seconde pour mettre à jour sur la page
    setTimeout("startTime()",500);
}

Horloge avec image

Exemple de rotation d'image dans la page

Horloge

HTML

<body onload="tournerImageHorloge()">
    <img src="img/clock.png" alt="Horloge png" id="imgHorloge">

    <script src="script/horloge.js" defer></script>
</body>

JavaScript

//Variable globale pour qu'elle subsiste après l'exécution de la fonction
let angle = 0;

function tournerImageHorloge()
{
    //Trouver l'image sur laquelle appliquer une rotation
    let horloge = document.getElementById("imgHorloge");

    //Si on a fait 360 degrés, on recommence à 0
    if(angle == 360)
    {
        angle = 0;
    }

    //Appliquer une transformation CSS (rotation)
    horloge.style.transform = "rotate(" + angle + "deg)";

    angle = angle + 30;

    //Chronomètre qui relance la fonction à toutes les secondes
    setTimeout("fTournerHorloge()",1000);
}

Interchanger une image

Exemple de modification du src (source) d'une image dans la page

ampoule

HTML

<img alt="bulb" src="img/bulb_off.png" id="lampe" onclick="allumerAmpoule()">

Javascript

//Variable globale pour conserver l'état
let allume = false;

function allumerAmpoule() {
    //Trouver l'image sur la page
    let varImg = document.getElementById("lampe");

    //Si éteinte, on affiche l'image allumée, sinon on affiche l'image éteinte
    if(allume == false)
    {
        varImg.src = "img/bulb_on.png";
        allume=true;
    }
    else
    {
        varImg.src = "img/bulb_off.png";
        allume=false;
    }
}

Alterner des images automatique

Exemple de modification de la source de plusieurs images

Img alternate

HTML

<body onload="alternerImages()">
   <img src="img/slide1.png" alt="slide 1" id="slide1">
    <img src="img/slide2.png" alt="slide 2" id="slide2">
    <img src="img/slide3.png" alt="slide 3" id="slide3">

    <script src="script/change.js" defer></script>
</body>

JavaScript

//Variables globales pour conserver à quelle image on est rendu dans la rotation
//après chaque exécution de la fonction startSlide()
let imageno=4;
let slideno=1;

function alternerImages()
{
    let slidename="slide"+slideno;
    document.getElementById(slidename).src="img/slide" + imageno + ".jpg";

    if (imageno<7)
    {
        imageno=imageno+1;
    }else{
        imageno=1;
    }

    if (slideno<3)
    {
        slideno=slideno+1;
    }else{
        slideno=1;
    }

    setTimeout("alternerImages()",2000);
}

Apparition du retour vers le haut

Souvent, la flèche de retour vers le haut de la page apparaît après avoir défilé une partie de la page vers le bas.

Voici comment y arriver :

  1. Dans le HTML, inscrire la balise d'image pour la flèche
  2. Dans le CSS, cacher l'image par défaut
  3. Par Javascript, détecter le défilement de la page et modifier le CSS de l'image lorsque le défilement a atteint une hauteur donnée

HTML

<body onscroll="afficherRetourHaut()">
    <a href="#top">
        <span class="fas fa-arrow-alt-circle-up" id="to_top_arrow"></span>
    </a>
</body>

CSS

#to_top_arrow {
    /*cacher par défaut*/
    display: none;

    /*positionnement lorsque visible*/
    position: fixed;
    bottom: 10%;
    right: 5%;
}

Javascript

function afficherRetourHaut() {

    //Si le document a défilé de plus de 350 pixels, afficher la flèche, sinon la cacher
    if (document.documentElement.scrollTop > 350) {
        document.getElementById("to_top_arrow").style.display = "block";
    }
    else{
        document.getElementById("to_top_arrow").style.display = "none";
    }
}