Ada banyak contoh JavaScript yang menerapkan efek jam digital di internet, tetapi artikel ini memperkenalkan Anda pada jam digital dengan efek pengguliran. Editor berpikir efeknya sangat mengesankan, jadi saya akan membaginya dengan Anda di bawah ini.
Mari kita lihat efek yang mempesona terlebih dahulu
Di bawah ini adalah contoh kode
Bagian Kode JavaScript:
window.onload = function () {function todou (n) {return n <10? "0"+n: ""+n;} var oimg = document.getElementsbytagname ("img"); setInterval (clock, 1000); clock () function clock () {var odate = new date (); var oDate. om = odate.getSeconds (); var str = todou (oh)+todou (dari)+todou (om); untuk (var i = 0; i <oimg.length; i ++) {move (oimg [i], {"margintop":-35*str.chargoat (i)});Bagian Tata Letak Div+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 src = "img/num.png"/</li> <li> <li> <iMg = "IMG/NUM.PNG"/</li> <li> <li> <piG. " /> </li> <li> <img src = "img/num.png"/> </li> </ul>*{padding: 0; Margin: 0; List-style: none;} ul {width: 200px; margin: 100px auto;} li {float: left; Tinggi: 35px; meluap: tersembunyi; Line-Height: 35px;}Meringkaskan
Di atas adalah semua contoh kode tentang jam digital yang menggunakan JavaScript untuk mencapai efek gulir. Kode sederhana tetapi efeknya sangat bagus. Saya harap ini dapat membantu Anda membutuhkan.