Maison > Article > interface Web > Exemples pour expliquer JS+CSS pour obtenir un effet d'horloge numérique variable
Exemples pour expliquer JS+CSS pour obtenir un effet d'horloge numérique variable
- 小云云original
- 2017-12-25 15:00:582218parcourir
Dans cet article, nous utilisons principalement des feuilles de style js et css pour obtenir l'effet d'animation d'une horloge roulante. Cet effet est généralement utilisé dans l'animation d'ouverture des pages Web et l'affichage de l'heure des régions. L'effet d'animation est également très personnalisé. Faisons-le d'abord. Jetez un œil à l'effet après l'exécution :
Voici le code complet de cette animation d'horloge roulante :
<!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 sert principalement à contrôler l'effet de défilement de l'animation. CSS est utilisé pour contrôler la taille des nombres, etc.
Recommandations associées :
Utilisez Canvas pour effectuer les étapes de mise en œuvre de l'horloge
JavaScript pour implémenter le projet "Creative Clock"
Créez un effet d'horloge simple
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn