So implementieren Sie eine rollende Digitaluhr in JS+CSS-js-Tutorial-php.cn

So implementieren Sie eine rollende Digitaluhr in JS+CSS

亚连

Freigeben： 2018-06-15 16:08:49

Original

1820 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie mit JS-Code und CSS-Stilen den Animationseffekt einer rollenden Uhr erzielen. Lassen Sie uns gemeinsam lernen.

In diesem Artikel verwenden wir JS- und CSS-Stylesheets, um den Animationseffekt einer rollenden Uhr zu realisieren. Dieser Effekt wird im Allgemeinen bei der Eröffnungsanimation von Webseiten und der Zeitanzeige im Bereich verwendet Schön und der Animationseffekt ist auch sehr personalisiert. Schauen wir uns zunächst den Effekt nach dem Ausführen an:

Das Folgende ist der gesamte Code dieser Rolling-Clock-Animation:

<!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: &#39;Roboto Condensed&#39;, 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: &#39;:&#39;;}
.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>
&#39;use strict&#39;;
var size = 86;
var columns = Array.from(document.getElementsByClassName(&#39;column&#39;));
var d = undefined,
 c = undefined;
var classList = [&#39;visible&#39;, &#39;close&#39;, &#39;far&#39;, &#39;far&#39;, &#39;distant&#39;, &#39;distant&#39;];
var use24HourClock = true;
function padClock(p, n) {
	return p + (&#39;0&#39; + n).slice(-2);
}
function getClock() {
	d = new Date();
	return [use24HourClock ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(padClock, &#39;&#39;);
}
function getClass(n, i2) {
	return classList.find(function (class_, classIndex) {
		return i2 - classIndex === n || i2 + classIndex === n;
	}) || &#39;&#39;;
}

var loop = setInterval(function () {
	c = getClock();

	columns.forEach(function (ele, i) {
		var n = +c[i];
		var offset = -n * size;
		ele.style.transform = &#39;translateY(calc(50vh + &#39; + offset + &#39;px - &#39; + size / 2 + &#39;px))&#39;;
		Array.from(ele.children).forEach(function (ele2, i2) {
			ele2.className = &#39;num &#39; + getClass(n, i2);
		});
	});
}, 200 + Math.E * 10);
</script>
</body>
</html>

Nach dem Login kopieren

Hinweis: Der oberste Inhalt ist CSS-Stil, wo Sie Farben, Schriftarten usw. anpassen können.

<style>
body{text-align: center;background-color: #0e141b;color: rgba(224, 230, 235, 0.89);font-family: &#39;Roboto Condensed&#39;, 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: &#39;:&#39;;}
.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>

Nach dem Login kopieren

JS-Code wird hauptsächlich zur Steuerung des Scrolleffekts von Animationen verwendet, und CSS wird verwendet um die Größe von Zahlen und anderen Inhalten zu steuern.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verwenden Sie JavaScript, um unterschiedliche Preise für jeden Tag innerhalb des Datumsbereichs zu erhalten

So implementieren Sie das Bild Laden der Komponente in Vue

Warum wird Node.js zur Webanwendungsentwicklung?

Wie erhalte ich den Datei-Upload-Fortschritt in Node.js?

So implementieren Sie die längste gemeinsame Teilsequenz in Javascript

Informationen dazu, wie Vue das dynamische Laden von Bildern src implementiert

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine rollende Digitaluhr in JS+CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!