Utilisez CSS + natif JS pour faire des horloges simples. L'effet est le suivant
Pour atteindre cet effet, il est divisé en trois parties principales: HTML, JavaScript et CSS
partie HTML
La pièce HTML est relativement simple, définissant une div d'horloge, qui a l'origine, l'heure, la minute, la seconde main, la date et l'heure. Quant aux échelles, les nombres et autres éléments de l'horloge, car la quantité est relativement grande, elle est générée en utilisant JVAscript à l'aide de JVaScript.
<! doctype html> <html> <éadf> <meta charset = "utf-8"> <link rel = 'stylesheet' href = 'external css file pathy' /> <title> horloge </ title> </-then> <! id = "hour-line"> </ div> <div id = "minute-line"> </ div> <div id = "second-line"> </ div> <! - Date -> <div id = "hour-time"> </ div> <! - Time -> <v> <div id = "hour-time"> </ div> <div id = "Minute Twe </ div> <script type = 'text / javascript' src = 'Path de fichier javascript externe'> </ script> </ body> </html>
Partie CSS
Avant de commencer le code, il existe certaines propriétés de CSS qui doivent être comprises, comme le positionnement, le radius frontalier, la transformation, etc.
Attributs de position
L'attribut de position spécifie le type de positionnement d'un élément, avec cinq valeurs: absolue, fixe, relative, statique, hérite. La valeur par défaut est statique, c'est-à-dire qu'il n'y a pas de positionnement, et les éléments sont affichés en fonction du flux de document normal; Les principales utilisations ici sont absolues et relatives
Valeur absulte, définissez l'élément sur le positionnement absolu et le positionnez par rapport au premier élément supérieur qui se positionna de manière inattendue statiquement. La position peut être positionnée à travers les attributs «gauche», «haut», «droit», «inférieur»; Si l'élément supérieur est tout positionné statiquement, il sera positionné par rapport à la position de l'élément corporel.
Dans cet exemple, définissez l'horloge div la plus externe sur relative, et tous les éléments inférieurs sont définis sur un positionnement absolu absolu, puis déterminez sa position par rapport à l'horloge en définissant les valeurs des attributs tels que la gauche et le haut.
Attribut Border-Radius
L'attribut Border-Radius ajoute une bordure arrondie à un élément. Vous pouvez régler la taille de quatre coins arrondis. Dans cet exemple, utilisez cet attribut pour définir l'élément d'horloge sur un cercle
Voici un exemple: 4 éléments div, toutes les largeurs et la hauteur sont de 100px, et les effets de la radius frontalière sont différents:
Attribut de transformation
La propriété de transformation applique une rotation 2D ou 3D à un élément, ce qui nous permet de tourner, d'échec, de déplacer ou d'incliner l'élément. Dans cet exemple, l'heure, la minute, la seconde, l'échelle, etc. sont toutes tournées à l'aide de l'attribut Transform; De plus, l'attribut d'origine Transform-Origin peut définir la position du point de base de l'élément.
Le code de la partie CSS
/ * Global * / * {margin: 0; rembourrage: 0;}. Clock {largeur: 400px; hauteur: 400px; Border: 10px solide # 333; Box-Shadow: 0px 0px 20px 3px # 444 Encart; Border-Radius: 210px; Position: relative; marge: 5px automatique; Z-Index: 10; Background-Color: # f6f6f6;} / * Numéro d'horloge * /. Clock-num {width: 40px; hauteur: 40px; taille de police: 22px; Texte-aligne: Centre; hauteur de ligne: 40px; Position: absolue; Z-Index: 8; Couleur: # 555; Font-Family: Fantasy, 'Trebuchet MS';}. EM_NUM {FONT-SIZE: 28PX;} / * Pointer * /. Clock-Line {Position: Absolute; z-index: 20;}. hour-ligne {largeur: 100px; hauteur: 4px; En haut: 198px; Gauche: 200px; Color d'arrière-plan: # 000; Border-Radius: 2px; Transform-Origin: 0 50%; Box-Shadow: 1px -3px 8px 3px #aaa;}. Minute-Line {width: 130px; hauteur: 2px; En haut: 199px; Gauche: 190px; Color d'arrière-plan: # 000; Transform-Origin: 7,692% 50%; Box-Shadow: 1px -3px 8px 1px #aaa;}. Second-Line {width: 170px; hauteur: 1px; En haut: 199,5px; Gauche: 180px; Color d'arrière-plan: # F60; Transform-Origin: 11,765% 50%; Box-Shadow: 1px -3px 7px 1px #bbb;} / * Origin * /. Origin {width: 20px; hauteur: 20px; Border-Radius: 10px; Color d'arrière-plan: # 000; Position: absolue; En haut: 190px; Gauche: 190px; Z-index: 14;} / * date-heure * /. Date-info {width: 160px; hauteur: 28px; hauteur de ligne: 28px; Texte-aligne: Centre; Position: absolue; En haut: 230px; Gauche: 120px; Z-Index: 11; Couleur: # 555; Police-poids: Bold; Font-Family: 'Microsoft Yahei';}. Time-Info {width: 92px; hauteur: 30px; hauteur de ligne: 30px; Texte-aligne: Centre; Position: absolue; En haut: 270px; Gauche: 154px; Z-Index: 11; Color en arrière-plan: # 555; rembourrage: 0; Box-shadow: 0px 0px 9px 2px # 222 inset;}. Time {width: 30px; hauteur: 30px; Texte-aligne: Centre; flottant: à gauche; Couleur: #FFF; Font-Weight: Bold;} # Minute-temps {Border-Left: 1px solide #ffff; Border-Right: 1px solide #ffff;} / * échelle * /. Clock-échelle {width: 195px; hauteur: 2px; Transform-Origin: 0% 50%; Z-Index: 7; Position: absolue; En haut: 199px; gauche: 200px;}. Scale-show {largeur: 12px; hauteur: 2px; Color en arrière-plan: # 555; float: Left;}. Scale-Hidden {Width: 183px; hauteur: 2px; Float: à gauche;}partie javascript
Il n'y a rien à dire sur la partie JS. Pour les opérations DOM simples, la fonction SetInterval est exécutée à chaque seconde, et l'angle du pointeur et le temps d'affichage sont simplement modifiés. Le code est le suivant
(function () {window.onLoad = initNumxy (200, 160, 40,40); var hour_line = document.getElementById ("hour-line"); var minute_line = document.getElementByid ("Minute-Line"); var second_line = document.getElementyid ("second-line"); var date_info = document.getElements 'Sunday', 'Monday', 'Tue', 'Tue', 'Friday', 'Sunday', 'Sunday', 'Tue', 'Friday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday', 'Sunday' 'Saturday' ]; var hour_time = Document.getElementByid (Hour "); this_day.getMinutes (); var seconde = this_day.getSeconds (); (this_day.getmonth () + 1); - 90) + 'deg)'; this_day.Gethours (): this_day.gethours (); this_day.getSeconds ();} setInterval (setTime, 1000); fonction initNumxy (r, r, w, h) {var numxy = [{"Left": R + 0,5 * R - 0,5 * W, " : R - 0,5 * R - 0,5 * H}, {"Left": R + R - 0,5 * W, "TOP": R - 0,5 * H}, {"Left": R + R - 0.5 * W, "TOP": R - 0.5 * H}, {"Left": R + 0.5 * R * 1,73205 - 0,5 * W, "TOP":: R + 0.5 * R - 0,5 * H} : R + 0,5 * R - 0,5 * W, "TOP": R + 0,5 * R * 1,732 - 0,5 * H}, {"Left": R - 0,5 * W, "TOP": R + 0,5 * R * 1,732 - 0,5 * H}, {"Left": R - 0,5 * R - 0.5 * W, "TOP": R + 0,5 * R * 1.732 - 0,5 * H} : R - 0,5 * r - 0,5 * W, "Top": R + 0,5 * R * 1,732 - 0,5 * H}, {"Left": R - 0,5 * R * 1,73205 - 0,5 * W, "TOP": R + 0,5 * R - 0.5 * H}, {"Left": R - 0.5 * R - 0.5 * H}, {"Left": R - 0,5 * 0,5 * w, "top": r - 0,5 * r - 0,5 * h}, {"gauche": r - 0,5 * r - 0,5 * h}, {"Left": r - 0,5 * r - 0,5 * w, "top": r - 0.5 * r * 1,73205 - 0,5 * h}, {"gauche": r - 0.5 * R - 0,5 * W, "TOP 1.73205 - 0,5 * H}, {"Left": R - 0,5 * R - 0,5 * H}, {"Left": R - 0,5 * R - 0,5 * W, "TOP": R - 0.5 * R * 1.73205 - 0,5 * H}, {"Left": R - 0,5 * W, "TOP": R - 0.5 * H}]; Document.getElementById ("Clock"); } var horlogel_num = document.getElementsByClassName ("Clock-num"); I <60; i ++) {horloge {Scale [i] .style.transform = "Rotate (" + (i * 6 - 90) + "deg)";}}}) ();Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.