Es gibt viele Beispiele für JavaScript, die digitale Takteffekte im Internet implementieren, aber in diesem Artikel werden Sie mit Scrolling -Effekten in die digitalen Uhren eingeführt. Der Herausgeber ist der Meinung, dass der Effekt sehr beeindruckend ist, daher werde ich ihn unten mit Ihnen teilen.
Schauen wir uns zuerst die schillernden Effekte an
Unten finden Sie ein Code -Beispiel
JavaScript -Code -Teil:
window.onload = function () {function todou (n) {return n <10? "0"+n: ""+n;} var oimg = document.getElementsByTagName ("img"); setInterval (clock, 1000); clock () function Takt () {var odate = new Date (); var oh = Odate (); om = odate.getSeconds (); var str = todou (oh)+todou (von)+todou (om); für (var i = 0; i <oimg.length; i ++) {move (oimg [i], {"margintop":-35*str.charat (i)});}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}Div+CSS -Layoutteil:
<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 /> </li> <li> <img src = "img/num.png"/> </li> </ul>*{padding: 0; Rand: 0; Listenstil: Keine;} ul {width: 200px; Rand: 100px Auto;} li {float: links; Höhe: 35px; Überlauf: versteckt; Zeilenhöhe: 35px;}Zusammenfassen
Das obige sind alle Beispielcodes über digitale Uhren, die JavaScript verwenden, um Scrolling -Effekte zu erzielen. Der Code ist einfach, aber der Effekt ist sehr gut. Ich hoffe, es kann Ihnen in Not helfen.