Il existe de nombreux exemples de JavaScript implémentant les effets de l'horloge numérique sur Internet, mais cet article vous présente les horloges numériques avec des effets de défilement. L'éditeur pense que l'effet est très impressionnant, donc je le partagerai avec vous ci-dessous.
Jetons un coup d'œil aux effets éblouissants en premier
Vous trouverez ci-dessous un exemple de code
Partie de code JavaScript:
window.onload = function () {function todou (n) {return n <10? "0" + n: "" + n;} var oimg = document.getElementsByTagName ("img"); setInterval (horloge, 1000); horloge () function horloge () {var odate = new Date (); var oh = odate.Gethores (); om = odate.getSeconds (); var str = todou (oh) + todou (of) + todou (om); for (var i = 0; i <oimg.length; i ++) {move (oimg [i], {"margintop": - 35 * str.charat (i)});}}}}}DIV + CSS Pièce de mise en page:
<ul> <li> <img src = "img / num.png" /> </li> <li> <img src = "img / num.png" /> </li> <li>: </li> <li> <img src = "img / num.png" /> </li> <li> <img src = "img / num.png" /> </li> </ul> * {padding: 0; marge: 0; Style de liste: aucun;} ul {largeur: 200px; marge: 100px auto;} li {float: gauche; hauteur: 35px; débordement: caché; hauteur de ligne: 35px;}Résumer
Ce qui précède est tous les exemples de codes sur les horloges numériques qui utilisent JavaScript pour obtenir des effets de défilement. Le code est simple mais l'effet est très bon. J'espère que cela peut vous aider dans le besoin.