JavaScript to achieve digital clock effects
|
This article example shares the specific code for implementing digital clock effects in javascript for your reference. The specific content is as follows See the effect first, dynamic digital clock
jQuery is used, but only to get elements, only a little bit Object-oriented development Look at the code HTML, import jQuery and js yourself, jQuery first
<body>
<div class="wrapper">
<div class="column">
<!-- This div represents the tens digit, which can be 0, 1, or 2. -->
<div>0</div>
<div>1</div>
<div>2</div>
</div>
<!-- The following content is too redundant to be written in HTML code, so it is written using js-->
<div class="column ten"></div>
<div class="coln">:</div>
<div class="column six"></div>
<div class="column ten"></div>
<div class="coln">:</div>
<div class="column six"></div>
<div class="column ten"></div>
</div>
</body>CSS
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
background-color: #0e141b;
overflow: hidden;
/* Set overflow to hide */
}
.wrapper{
text-align: center;
width: 100%;
}
.wrapper .column,
.wrapper .coln{
display: inline-block;
vertical-align: top;
color: rgba(224,230,235,0.89);
font-size: 86px;
line-height: 86px;
font-weight: 300;
}
.column{
transition: all 300ms ease-in;
}
.coln{
/* Colon position*/
transform: translateY(calc(50vh - 83px));
}
/* The following are the transparency corresponding to different class names*/
.visible{
opacity: 1;
}
.close{
opacity: 0.25;
}
.far{
opacity: 0.15;
}
.distance{
opacity: 0.05;
}JS
function Index(dom, use) {
// Convert the passed DOM element to an array this.column = Array.from(dom);
// Transfer use to the global state, this is to determine whether the time system to be displayed is 112 hours or 24 hours this.use = use;
// This array is the class name to be set later this.classList = ['visible', 'close', 'far', 'distance', 'distance', 'distance', 'distance', 'distance'];
this.createDom();
this.start();//Start}
// Start function Index.prototype.start = function () {
var self = this;
setInterval(function () {
var c = self.getClock();
// console.log(c);
self.column.forEach(function (ele, index) {
var n = + c[index];
var offset = n * 86; //moving distance console.log(offset);
$(ele).css({
'transform': 'translateY(calc(50vh - ' + offset + 'px - 73px))'
// Set movement });
Array.from(ele.children).forEach(function (ele2, index2) {
var className = self.getClass(n, index2);
// Call function to set class name $(ele2).attr('class', className);
})
})
}, 500);
};
// Set different class names for elements with different distance times Index.prototype.getClass = function (n, i) {
var className = this.classList.find(function (ele, index) {
return i - index === n || i + index === n;
})
return className || "";
}
// Get the time and format it, string 21:06:09 ==> 210609
Index.prototype.getClock = function () {
var d = new Date();
// Here we use a ternary operator. If use is true, we get the value. If it is false, we convert the remainder of 12 to a 12-hour system. return [this.use ? d.getHours() : d.getHours() % 12 || 12, d.getMinutes(), d.getSeconds()].reduce(function (p, n) {
return p + ('0' + n).slice(-2);
// Here we add 0 to the single digit, for example, 1 plus 0 gives 01, if 12 plus 0 gives 012, but taking the last two digits of the value gives 12
}, '')
};
// Since writing all HTML elements into the HTML file is too redundant, we use a for loop to add them Index.prototype.creatDom = function () {
for (var i = 0; i < 6; i++) {
var oDiv = '<div>' + i + '</div>';
$(".six").append(oDiv);
}
for (var i = 0; i < 10; i++) {
var iDiv = '<div>' + i + '</div>';
$(".ten").append(iDiv);
}
};
// The second parameter, true is 24-hour system, false is 12-hour system new Index($('.column'), true);I wrote a relatively complete comment for js, so you should be able to understand it. The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to change the root user's password in MySQL
>>: How to connect to a remote server and transfer files via a jump server in Linux
Recommend
Detailed code of the example of downloading the docker installation package from yum and installing it on an offline machine
1. On a networked machine, use the default centos...
JS+AJAX realizes the linkage of province, city and district drop-down lists
This article shares the specific code of JS+AJAX ...
Summary of practical experience of HTML knowledge points
1. The table tag is table, tr is row, td is cell, ...
MySQL 5.7.29 + Win64 decompression version installation tutorial with pictures and text
Download the official website Choose the version ...
Several ways to implement image adaptive container with CSS (summary)
There is often a scenario where the image needs t...
Synchronize the full and incremental data of a specific MySQL table to the message queue - Solution
Table of contents 1. Original demand 2. Solution ...
A quick solution to accidentally delete MySQL data (MySQL Flashback Tool)
Overview Binlog2sql is an open source MySQL Binlo...
Analysis of problems caused by MySQL case sensitivity
MYSQL is case sensitive Seeing the words is belie...
Commonly used HTML format tags_Powernode Java Academy
1. Title HTML defines six <h> tags: <h1&...
In-depth analysis of MySQL explain usage and results
Preface In daily work, we sometimes run slow quer...
Detailed explanation of CSS3 animation and new features of HTML5
1. CSS3 animation ☺CSS3 animations are much easie...
Implementation of vite+vue3.0+ts+element-plus to quickly build a project
Table of contents vite function Use Environment B...
Centos7.3 How to install and deploy Nginx and configure https
Installation Environment 1. gcc installation To i...
Two ways to solve the problem of MySQL master-slave database not being synchronized
Table of contents Two ways to solve the problem o...
Docker Compose one-click ELK deployment method implementation
Install Filebeat has completely replaced Logstash...