Hay muchos ejemplos de JavaScript que implementan efectos de reloj digital en Internet, pero este artículo le presenta los relojes digitales con efectos de desplazamiento. El editor cree que el efecto es muy impresionante, por lo que lo compartiré con usted a continuación.
Echemos un vistazo a los efectos deslumbrantes primero
A continuación se muestra un ejemplo de código
Parte del código JavaScript:
Window.Onload = function () {function toDou (n) {return n <10? "0"+n: ""+n;} var oimg = document.getElementsByTagName ("img"); setInterval (clock, 1000); function clock () {var odate = nueva fecha (); var oDate.gethours (); var de = odate.get (); 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+Part de diseño CSS:
<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 = "img/num.png" /> </li> <li> <img src = "img/num.png"/> </li> </ul>*{padding: 0; margen: 0; estilo list: ninguno;} ul {ancho: 200px; margen: 100px auto;} li {float: izquierda; Altura: 35px; desbordamiento: oculto; Línea-aguja: 35px;}Resumir
Lo anterior es todos los códigos de ejemplo sobre relojes digitales que usan JavaScript para lograr efectos de desplazamiento. El código es simple pero el efecto es muy bueno. Espero que pueda ayudarlo a necesitar.