มีตัวอย่างมากมายของ JavaScript ที่ใช้เอฟเฟกต์นาฬิกาดิจิตอลบนอินเทอร์เน็ต แต่บทความนี้แนะนำให้คุณรู้จักกับนาฬิกาดิจิตอลด้วยเอฟเฟกต์การเลื่อน บรรณาธิการคิดว่าเอฟเฟกต์นั้นน่าประทับใจมากดังนั้นฉันจะแบ่งปันกับคุณด้านล่าง
มาดูเอฟเฟกต์พราวก่อน
ด้านล่างเป็นตัวอย่างรหัส
ส่วนรหัส JavaScript:
window.onload = function () {function todou (n) {return n <10? "0"+n: ""+n;} var oimg = document.getElementSbyTagname ("img"); setInterval (นาฬิกา 1,000); om = odate.getSeconds (); var str = todou (โอ้)+todou (ของ)+todou (om); สำหรับ (var i = 0; i <oimg.length; i ++) {ย้าย (oimg [i], {"Margintop":-35*str.charatส่วนเลย์เอาต์ 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> </ul>*{padding: 0; มาร์จิ้น: 0; รายการสไตล์: ไม่มี;} ul {width: 200px; ระยะขอบ: 100px auto;} li {float: ซ้าย; ความสูง: 35px; ล้น: ซ่อน; สายไฟ: 35px;}สรุป
ข้างต้นเป็นรหัสตัวอย่างทั้งหมดเกี่ยวกับนาฬิกาดิจิตอลที่ใช้ JavaScript เพื่อให้ได้เอฟเฟกต์การเลื่อน รหัสนั้นง่าย แต่เอฟเฟกต์ดีมาก ฉันหวังว่ามันจะช่วยคุณได้