Chronomètre utilisant html css et javascript suivez-nous sur instagram... https://www.instagram.com/webstreet

Chronomètre utilisant html css et javascript suivez-nous sur instagram... https://www.instagram.com/webstreet_code/

Patricia Arquette

Libérer： 2024-11-11 01:56:02

original

821 Les gens l'ont consulté

Stopwatch using html css and javascript follow us on the instagram... https://www.instagram.com/webstreet_code/

Suivez-nous sur Instagram : https://www.instagram.com/webstreet_code/

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=
    , échelle initiale=1,0">
    <title>Chronomètre</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<style>

    corps{
        affichage : flexible ;
        justifier-contenu : centre ;
        aligner les éléments : centre ;
        hauteur : 100vh ;
        couleur d'arrière-plan : #282c34 ;
        couleur : blanc ;
        famille de polices : Arial, Helvetica, sans-serif ;
        direction flexible : colonne ;
    }

    .horloge{
        affichage : flexible ;
        direction flexible : colonne ;
        aligner les éléments : centre ;
        marge inférieure : 20 px ;
    }
    .cadran d'horloge {
            largeur : 300 px ;
            hauteur : 300px ;
            couleur d'arrière-plan : #282c34 ;
            rayon de bordure : 50 % ;
            position : relative ;
            box-shadow : 0 0 40px 1px rgb(56, 56, 62);
        }
        .main {
            largeur : 36 % ;
            hauteur : 4px ;
            arrière-plan : #58f5db ;
            position : absolue ;
            haut : 50 % ;
            gauche : 11 % ;
            origine de transformation : 100 % ;
            transformation : rotation (90 degrés) ;
            fonction de synchronisation de transition : facilité d'entrée et de sortie ;
            transition : toutes les 0,05 s ;
        }

        .d'occasion{
            couleur de fond : bleu ;
            indice z : 1 ;
        }

        .cercle {
            hauteur : 20px ;
            largeur : 20 px ;
            rayon de bordure : 50 % ;
            couleur de fond : blanc ;
            position : absolue ;
            haut : 48 % ;
            gauche : 44 % ;
            indice z : 0,8 ;
        }

        .cercle intérieur{
            hauteur : 10px ;
            largeur : 10px ;
            rayon de bordure : 50 % ;
            couleur de fond : bleu ;
            marge:auto;
            marge supérieure : 5 px
        }
        /* Marquages d'horloge */
        .marquages {
            position : absolue ;
            largeur : 100 % ;
            hauteur : 100 % ;
            affichage : flexible ;
            justifier-contenu : centre ;
            aligner les éléments : centre ;
            /* transformation : traduireY(-50%); */
        }

        .markings div {
            position : absolue ;
            taille de police : 16 px ;
            transformer : traduire (-50 %, -50 %);
        }

        .cocher{
            largeur : 2px ;
            hauteur : 10px ;
            couleur d'arrière-plan : blanc ;
            position : absolue ;
            transformation-origine : centre ;
        }

        .numérique {
            taille de police : 24 px ;
            position : absolue ;
            haut : 20 % ;
            largeur : 100 % ;
            alignement du texte : centre ;
        }


        .boutons{
            affichage : flexible ;
            écart : 20 px ;
        }
        je{
            taille de police : 40 px ;
            curseur : pointeur ;
        }.fa-play{
            couleur de fond : bleu ;
            remplissage : 10 px ;
            rayon de bordure : 50 % ;
        }
        .fa-stop{
          couleur : rouge ;
          taille de police : 45px
        }




        .fa-rotation-droite{
            marge : 8px ;
            marge gauche : 35 px ;
        }

</style>



















&Lt;/tête>
<corps>

    <div>

Copier après la connexion

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!