search

Home >Web Front-end >JS Tutorial >Examples to explain JS+CSS to achieve rolling digital clock effect

Examples to explain JS+CSS to achieve rolling digital clock effect

小云云
小云云Original
2017-12-25 15:00:582328browse

In this article, we mainly use js and css style sheets to achieve the animation effect of a rolling clock. This effect is generally used in the opening animation of web pages and the time display of the area. It is very beautiful and the animation effect is also very personalized. Let’s do it first. Take a look at the effect after running:

The following is the entire code of this 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>

Note: The top one is the CSS style content, where you can adjust the color, font, etc.


<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>

The JS code is mainly used to control the scrolling effect of the animation, and CSS is used to control the numbers. size etc.

Related recommendations:

Using canvas to make a clock implementation steps

JavaScript implementation of the "Creative Clock" project

Create a simple clock effect

The above is the detailed content of Examples to explain JS+CSS to achieve rolling digital clock effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：WeChat mini program recording and playback recording function example tutorialNext article：WeChat mini program recording and playback recording function example tutorial

Related articles

See more