+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 648
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 648
    Points : 91 537
    Points
    91 537
    Billets dans le blog
    20

    Par défaut Créer une horloge en CSS 3 (et un peu de JavaScript)



    Je vous propose mon article Réaliser une horloge avec CSS 3 et un peu de JavaScript.

    Dans cet article, je vous montre étape par étape la mise en œuvre de plusieurs fonctionnalités CSS 3 permettant d'afficher une horloge.

    N'hésitez pas à faire part de vos remarques et commentaires sur cet article et le code.

    Le design de l'horloge d'exemple est inspiré du thème de developpez.com, n'hésitez pas à proposer vos propres thèmes, je les intégrerais avec plaisir à l'article !
    Réaliser une horloge avec CSS 3 et un peu de JavaScript.

    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 148
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 148
    Points : 9 202
    Points
    9 202

    Par défaut

    Très joli comme résultat

    Et quand on assemble plein d'horloges ensemble, on peut faire une horloge digitale.
    One Web to rule them all

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 801
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 801
    Points : 25 250
    Points
    25 250

    Par défaut

    Bonjour,
    Bovino, SUPER et en plus elle fonctionne sur Safari 5.1.7

    Sylvain, cela me rappelles quelque chose http://web.developpez.com/defi/creat...y-jclockclock/,
    issue du premier défi http://web.developpez.com/defi/creat...ation/horloge/, mais c'est du javascript.

  4. #4
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 148
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 148
    Points : 9 202
    Points
    9 202

    Par défaut

    Oui c'est connu, ça vient de là : [ame="http://www.youtube.com/watch?v=zbulAxkeMbo"]the clock clock by humans since 1982 - YouTube[/ame]

    Prochain défi, le cadran solaire
    One Web to rule them all

  5. #5
    Membre expert
    Avatar de Kaamo
    Homme Profil pro
    Ingénieur développement logiciels
    Inscrit en
    avril 2007
    Messages
    1 166
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : avril 2007
    Messages : 1 166
    Points : 3 023
    Points
    3 023

    Par défaut

    Prochain défi, le cadran solaire
    Si ma mémoire est bonne, je crois que ça avait été fait durant ce concours justement.

    EDIT : J'ai retrouvé ! Un projet de Celira

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 801
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 801
    Points : 25 250
    Points
    25 250

    Par défaut

    Prochain défi, le cadran solaire
    Accessoirement c'est plus facile à suivre.

  7. #7
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    novembre 2012
    Messages
    3 148
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : novembre 2012
    Messages : 3 148
    Points : 9 202
    Points
    9 202

    Par défaut

    ou alors une horloge binaire ?
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    setInterval('document.write(Date.now().toString(2))',1000)
    One Web to rule them all

  8. #8
    Futur Membre du Club
    Femme Profil pro
    ???????????????
    Inscrit en
    janvier 2008
    Messages
    13
    Détails du profil
    Informations personnelles :
    Sexe : Femme

    Informations professionnelles :
    Activité : ???????????????
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : janvier 2008
    Messages : 13
    Points : 9
    Points
    9

    Par défaut

    c'est une belle horloge.

Discussions similaires

  1. Comment créer une marge en css ?
    Par lucas093 dans le forum Mise en page CSS
    Réponses: 13
    Dernier message: 18/03/2012, 08h37
  2. [LV 8.6] Créer une horloge numérique
    Par ptit_knard dans le forum LabVIEW
    Réponses: 5
    Dernier message: 08/07/2010, 00h52
  3. Créer une horloge
    Par luuuuuc dans le forum Access
    Réponses: 13
    Dernier message: 03/01/2007, 13h55
  4. Crer une jolie Horloge
    Par HwRZxLc4 dans le forum JavaScript
    Réponses: 10
    Dernier message: 23/05/2006, 10h18

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo