Maison > Article > interface Web > HTML+JS implémente une horloge avec des nombres roulants
Cette fois, je vais vous présenter HTML+JS pour implémenter une horloge numérique roulante. Quelles sont les précautions pour que HTML+JS implémente une horloge numérique roulante Voici un cas pratique, jetons un coup d'oeil. .
Voici le code complet de cette animation d'horloge défilante :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS3+JS滚动数字时钟代码-脚本之家</title> <style> body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235, 0.89);font-family: 'Roboto Condensed', sans-serif;font-weight: 300;overflow: hidden;} .column,.colon{display: inline-block;vertical-align: top;font-size: 86px;line-height: 86px;} .column{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;} .colon{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;-webkit-transform: translateY(calc(50vh - 43px));transform: translateY(calc(50vh - 43px));} .colon:after{content: ':';} .num{-webkit-transition: opacity 500ms, text-shadow 100ms;transition: opacity 500ms, text-shadow 100ms;opacity: 0.025;} .num.visible{opacity: 1.0;text-shadow: 1px 1px 0px #336699;} .num.close{opacity: 0.35;} .num.far{opacity: 0.15;} .num.distant{opacity: 0.1;} </style> </head> <body> <p class="column"> <p class="num">0</p> <p class="num">1</p> <p class="num">2</p> </p> <p class="column"> <p class="num">0</p> <p class="num">1</p> <p class="num">2</p> <p class="num">3</p> <p class="num">4</p> <p class="num">5</p> <p class="num">6</p> <p class="num">7</p> <p class="num">8</p> <p class="num">9</p> </p> <p class="colon"></p> <p class="column"> <p class="num">0</p> <p class="num">1</p> <p class="num">2</p> <p class="num">3</p> <p class="num">4</p> <p class="num">5</p> </p> <p class="column"> <p class="num">0</p> <p class="num">1</p> <p class="num">2</p> <p class="num">3</p> <p class="num">4</p> <p class="num">5</p> <p class="num">6</p> <p class="num">7</p> <p class="num">8</p> <p class="num">9</p> </p> <p class="colon"></p> <p class="column"> <p class="num">0</p> <p class="num">1</p> <p class="num">2</p> <p class="num">3</p> <p class="num">4</p> <p class="num">5</p> </p> <p class="column"> <p class="num">0</p> <p class="num">1</p> <p class="num">2</p> <p class="num">3</p> <p class="num">4</p> <p class="num">5</p> <p class="num">6</p> <p class="num">7</p> <p class="num">8</p> <p class="num">9</p> </p> <script> 'use strict'; var size = 86; var columns = Array.from(document.getElementsByClassName('column')); var d = undefined, c = undefined; var classList = ['visible', 'close', 'far', 'far', 'distant', 'distant']; var use24HourClock = true; function padClock(p, n) { return p + ('0' + n).slice(-2); } function getClock() { d = new Date(); return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, ''); } function getClass(n, i2) { return classList.find(function (class_, classIndex) { return i2 - classIndex === n || i2 + classIndex === n; }) || ''; } var loop = setInterval(function () { c = getClock(); columns.forEach(function (ele, i) { var n = +c[i]; var offset = -n * size; ele.style.transform = 'translateY(calc(50vh + ' + offset + 'px - ' + size / 2 + 'px))'; Array.from(ele.children).forEach(function (ele2, i2) { ele2.className = 'num ' + getClass(n, i2); }); }); }, 200 + Math.E * 10); </script> </body> </html>
Remarque : Celui du haut est le contenu de style CSS, où vous pouvez ajuster la couleur, la police, etc.
<style> body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235, 0.89);font-family: 'Roboto Condensed', sans-serif;font-weight: 300;overflow: hidden;} .column,.colon{display: inline-block;vertical-align: top;font-size: 86px;line-height: 86px;} .column{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;} .colon{-webkit-transition: -webkit-transform 300ms;transition: -webkit-transform 300ms;transition: transform 300ms;transition: transform 300ms, -webkit-transform 300ms;-webkit-transform: translateY(calc(50vh - 43px));transform: translateY(calc(50vh - 43px));} .colon:after{content: ':';} .num{-webkit-transition: opacity 500ms, text-shadow 100ms;transition: opacity 500ms, text-shadow 100ms;opacity: 0.025;} .num.visible{opacity: 1.0;text-shadow: 1px 1px 0px #336699;} .num.close{opacity: 0.35;} .num.far{opacity: 0.15;} .num.distant{opacity: 0.1;} </style>
Le code JS est principalement utilisé pour contrôler l'effet de défilement de l'animation, et CSS est utilisé pour contrôler la taille des nombres et autres contenus.
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
Lecture recommandée :
Comment faire flotter l'image au centre dans JS
JS implémente la commutation de défilement d'étiquettes
JS pour implémenter les effets de suivi de la souris
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!