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: '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>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: '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>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.
Related articles:
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
