Home > Article > Web Front-end > How to implement a rolling digital clock in JS+CSS

How to implement a rolling digital clock in JS+CSS

亚连Original: 2018-06-15 16:08:491741browse

This article teaches you how to use JS code and CSS styles to achieve the animation effect of a rolling clock. Let’s learn together.

In this article, we use js and css style sheets to realize the animation effect of a rolling clock. This effect is generally used in the opening animation of the web page and the time display in the area. It is very beautiful and the animation effect is also very personalized. , let’s first 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 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 animation, and CSS is used to control the size of numbers and other content.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use javascript to obtain different prices every day within the date range

How to implement the image loading component in vue

Why will Node.js become a web application development?

How to get the file upload progress in Node.js?

How to implement the longest common subsequence in javascript

About how vue implements dynamic loading of image src

The above is the detailed content of How to implement a rolling digital clock in JS+CSS. For more information, please follow other related articles on the PHP Chinese website!

JavaScript node.js css JS 样式表

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：jQuery Validation usage tutorialNext article：jQuery Validation usage tutorial

See more

How to implement a rolling digital clock in JS+CSS

Related articles