recherche

Maison >interface Web >js tutoriel >Chronomètre utilisant html css et javascript suivez-nous sur instagram... https://www.instagram.com/webstreet_code/

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

Patricia Arquette
Patricia Arquetteoriginal
2024-11-11 01:56:02824parcourir

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>

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!

JavaScript css ajax html auto using pointer function href display position margin padding border viewport background transform transition column flex https
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：Comment la méthode `sort()` de JavaScript utilise-t-elle une fonction de rappel pour le tri numérique ?Article suivant：Comment la méthode `sort()` de JavaScript utilise-t-elle une fonction de rappel pour le tri numérique ?

Articles Liés

Voir plus