La date/heure actuelle est Jeu 28 Mar 2024 - 23:21

1 résultat trouvé pour 8226

Est-il possible de créer un widget horloge affichant du texte a certaines heures.

Bonjour Adam_sfp

Adam_sfp a écrit:
Et ensuite on peut afficher une div à partir d'une certaine heure ou de plusieurs tranches horaires..

Une petite piste pour @Neptunia Wink


En fait s'il s'agit d'afficher un contenu entre l'heure X et l'heure Y, du moment que je connais les valeurs de X et Y ça ne devrait pas me poser de problème majeur.
Là où ça se corse un peu, c'est que je souhaite ne pas connaître ces valeurs X et Y et permettre à (presque) n'importe qui de choisir et d'indiquer son choix facilement.

Et comme ce qui me manque le plus n'est pas le temps, mais des plages étendues de temps où je serai à mon maximum de concentration, j'en suis encore à réfléchir à tous les scenarii possibles :
- le gars qui fait finir le jour avant qu'il n'ait commencé
- Celui qui veut le spectacle en journée alors que je pars sur l'idée que c'est la nuit que les lumières sont les plus belles
- Celui qui ne veut pas choisir et veut le code nocturne 24h/24
- Le vampire qui craint la lumière et veut au contraire le code "statique" de jour comme de nuit
- Celui qui choisit le couvre feu à minuit et choisit 24 alors que les heures ne vont que de 0 à 23

- Autre contrainte sur laquelle je n'ai pas encore planché (et je pense même qu'il se pourrait que je vois une contrainte là où il n'y en a pas) : je souhaite intégrer les 2 variables non pas dans le script à exécuter mais dans un autre javascript d'appel très court (on définit les 2 variables et on appelle le script principal)

Rayah a écrit:En fait fût un temps j'avais fais une demande d'horloge sur le forum ( géniale accessoirement ), le problème étant que depuis je ne gère plus l'ancien forum et visiblement il n'existe plus donc pas de moyen de récupérer les codes.
Il me semble d'après mes souvenirs que c'était simplement un changement de skin pour afficher ce que je voulais.


Si c'était une horloge commandée en section graphique, vous pouvez oublier parce que c'était du flash. Hors aujourd'hui la plupart des navigateurs bloquent le flash et demandent explicitement de l'activer s'ils tombent sur une page avec un tel contenu. Pas très pratique.

En revanche s'il s'agissait de javascript (et/ou jQuery) si vous aviez pensé à l'époque à passer le sujet en résolu, le code devrait être encore sur le forum.
Si c'était vous et que vous avez supprimé votre compte, ça va être dur de le retrouver au milieu de tous les sujets avec Invité pour auteur.
Si c'était vous sous un autre pseudo (c'est pas bien, les doubles comptes ne sont pas autorisés ici) ça sera retrouvé en un rien de temps à condition que vous n'ayez pas ouvert 36000 sujets.




J'ai trouvé un tuto très bien fait pour créer une horloge à partir de presque rien
Right developpez.com - Une horloge en CSS3
Tuto relativement récent (4 ans) et fonctionnel quoique perfectible

On peut voir sur la page du tuto que les puces représentant les heures sont remplacées par #8226
Dans le CSS fourni, remplacer
Code:
.sep:after{
    content: '•';
}

par :
Code:
.sep:after{
    content: "\ \2022";
}


Et pour le positionnement des repères horaires, la propriété transform est préfixée pour Opera -o- alors que ce navigateur utilise le préfixe -webkit- et n'était pas compatible dans sa vie antérieure. Là c'est pas gênant puisque les 12 lignes seront simplement ignorées.

Voici le rendu original obtenu à la fin du chapitre III : ICI

Ce que j'ai obtenu en réduisant la taille : Chez moi

Le code utilisé, à placer partout où Javascript et HTML sont autorisés : widget, message de la page d'accueil, description de catégorie, ou page HTML dans mon cas.
Code:
<style>
#horloge{
    height: 200px;
    margin: 40px auto;
    position: relative;
    width: 200px;
    border: 5px solid #3A5486;
    border-radius: 50%;
    background: url(http://www.developpez.net/template/images/logo.png) no-repeat scroll center 25% #FFFFFF;
    box-shadow: 0 0 40px #8080A0, 0 0 50px 10px #CCCCCC inset;
}
#horloge:before{
    border-radius: 50%;
    box-shadow: -2px -2px 5px #000000 inset, -2px 2px 5px #000000 inset, 2px -2px 5px #000000 inset, 2px 2px 5px #000000 inset;
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}
#seconde{
    left: 99px;
    top: 12px;
    height: 90px;
    border: 2px solid rgba( 110,150,180,0.8);
    -webkit-animation: tour 60s steps(60, end) infinite;
    -webkit-transform-origin: 50% 87px;
    -o-animation: tour 60s steps(60, end) infinite;
    -o-transform-origin: 50% 87px;
    animation: tour 60s steps(60, end) infinite;
    transform-origin: 50% 87px;
}
#minute{
    left: 98px;
    top: 27px;
    height: 75px;
    border: 4px solid rgba( 80,150,200,0.8);
    -webkit-animation: tour 3600s steps(60, end) infinite;
    -webkit-transform-origin: 50% 72px;
    -o-animation: tour 3600s steps(60, end) infinite;
    -o-transform-origin: 50% 72px;
    animation: tour 3600s steps(60, end) infinite;
    transform-origin: 50% 72px;
}
#heure{
    left: 97px;
    top: 50px;
    height: 50px;
    border: 6px solid rgba( 10,50,128,0.8);
    -webkit-animation: tour 43200s linear infinite;
    -webkit-transform-origin: 50% 50px;
    -o-animation: tour 43200s linear infinite;
    -o-transform-origin: 50% 50px;
    animation: tour 43200s linear infinite;
    transform-origin: 50% 50px;
}
#centre{
    left: 97px;
    top: 97px;
    border: 6px solid rgba(255,255,255,0.6);
}
.rond, .sep{
    position: absolute;
    border-radius: 50%;
}
.sep{
    height: 5px;
    width: 5px;
    text-align: center;
    line-height: 5px;
    top: 97px;
    left: 97px;
    color: #3A5486;
}
.sep:after{
    content: "\ \2022";
}
#h0{
    -webkit-transform: translate(0px, -95px);
    -o-transform: translate(0px, -95px);
    transform: translate(0px, -95px);
}
#h1{
    -webkit-transform: rotate(30deg) translate(0px, -95px);
    -o-transform: rotate(30deg) translate(0px, -95px);
    transform: rotate(30deg) translate(0px, -95px);
}
#h2{
    -webkit-transform: rotate(60deg) translate(0px, -95px);
    -o-transform: rotate(60deg) translate(0px, -95px);
    transform: rotate(60deg) translate(0px, -95px);
}
#h3{
    -webkit-transform: rotate(90deg) translate(0px, -95px);
    -o-transform: rotate(90deg) translate(0px, -95px);
    transform: rotate(90deg) translate(0px, -95px);
}
#h4{
    -webkit-transform: rotate(120deg) translate(0px, -95px);
    -o-transform: rotate(120deg) translate(0px, -95px);
    transform: rotate(120deg) translate(0px, -95px);
}
#h5{
    -webkit-transform: rotate(150deg) translate(0px, -95px);
    -o-transform: rotate(150deg) translate(0px, -95px);
    transform: rotate(150deg) translate(0px, -95px);
}
#h6{
    -webkit-transform: rotate(180deg) translate(0px, -95px);
    -o-transform: rotate(180deg) translate(0px, -95px);
    transform: rotate(180deg) translate(0px, -95px);
}
#h7{
    -webkit-transform: rotate(210deg) translate(0px, -95px);
    -o-transform: rotate(210deg) translate(0px, -95px);
    transform: rotate(210deg) translate(0px, -95px);
}
#h8{
    -webkit-transform: rotate(240deg) translate(0px, -95px);
    -o-transform: rotate(240deg) translate(0px, -95px);
    transform: rotate(240deg) translate(0px, -95px);
}
#h9{
    -webkit-transform: rotate(270deg) translate(0px, -95px);
    -o-transform: rotate(270deg) translate(0px, -95px);
    transform: rotate(270deg) translate(0px, -95px);
}
#h10{
    -webkit-transform: rotate(300deg) translate(0px, -95px);
    -o-transform: rotate(300deg) translate(0px, -95px);
    transform: rotate(300deg) translate(0px, -95px);
}
#h11{
    -webkit-transform: rotate(330deg) translate(0px, -95px);
    -o-transform: rotate(330deg) translate(0px, -95px);
    transform: rotate(330deg) translate(0px, -95px);
}
@-webkit-keyframes tour{
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}
@-o-keyframes tour{
    from{
        -o-transform: rotate(0deg);
    }
    to{
        -o-transform: rotate(360deg);
    }
}
@keyframes tour{
    from{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
</style>
<div id="horloge">
            
 <div class="rond" id="heure">
      
 </div>
            
 <div class="rond" id="minute">
      
 </div>
            
 <div class="rond" id="seconde">
      
 </div>
            
 <div class="rond" id="centre">
      
 </div>
            
 <div id="h0" class="sep">
      
 </div>
            
 <div id="h1" class="sep">
      
 </div>
            
 <div id="h2" class="sep">
      
 </div>
            
 <div id="h3" class="sep">
      
 </div>
            
 <div id="h4" class="sep">
      
 </div>
            
 <div id="h5" class="sep">
      
 </div>
            
 <div id="h6" class="sep">
      
 </div>
            
 <div id="h7" class="sep">
      
 </div>
            
 <div id="h8" class="sep">
      
 </div>
            
 <div id="h9" class="sep">
      
 </div>
            
 <div id="h10" class="sep">
      
 </div>
            
 <div id="h11" class="sep">
      
 </div>
</div><script>
var tt = new Date();
document.getElementById('seconde').style.webkitAnimationDelay = -(tt.getSeconds()) + 's';
document.getElementById('minute').style.webkitAnimationDelay = -(tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('heure').style.OAnimationDelay = -((tt.getHours()%12)*3600 + tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('seconde').style.OAnimationDelay = -(tt.getSeconds()) + 's';
document.getElementById('minute').style.OAnimationDelay = -(tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('heure').style.webkitAnimationDelay = -((tt.getHours()%12)*3600 + tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('seconde').style.animationDelay = -(tt.getSeconds()) + 's';
document.getElementById('minute').style.animationDelay = -(tt.getMinutes()*60 + tt.getSeconds()) + 's';
document.getElementById('heure').style.animationDelay = -((tt.getHours()%12)*3600 + tt.getMinutes()*60 + tt.getSeconds()) + 's';
</script>


Note 1 : Ce code est celui fourni à la fin du chapitre III et ne prend pas en compte la gestion des navigateurs antédiluviens. D'après le tuto, fonctionne sur tout navigateur  courant à l'exclusion d'Internet Explorer 9 (et inférieur). Testé sous IE11 et fonctionnel.

Note 2 : Dans le code fourni j'ai raccourci tout ce qui pouvait l'être depuis le code, aiguilles, contour de l'horloge ... mais pas l'image de fond que j'ai eu la flemme de changer.
La première chose à faire sera d'ailleurs de trouver une image qui vous convienne, parce que de nombreuses lignes du code utilisent des dimensions en pixel. Il faut connaître la taille de l'horloge avant d'y installer les aiguilles.
par Neptunia
le Jeu 30 Nov 2017 - 7:34
 
Rechercher dans: Archives des problèmes avec un code
Sujet: Est-il possible de créer un widget horloge affichant du texte a certaines heures.
Réponses: 10
Vues: 939

Revenir en haut

Sauter vers: