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 explanation of the implementation principle of MySQL transactions and Spring isolation levels
1. Transactions have ACID characteristics Atomici...
Small problem with the spacing between label and input in Google Browser
Code first, then text Copy code The code is as fol...
Use elasticsearch to delete index data regularly
1. Sometimes we use ES Due to limited resources o...
Summary of some common configurations and techniques of Nginx
Preface This article lists several common, practi...
Docker completely deletes private library images
First, let’s take a look at the general practices...
CentOS7 deployment Flask (Apache, mod_wsgi, Python36, venv)
1. Install Apache # yum install -y httpd httpd-de...
MySQL max_allowed_packet setting
max_allowed_packet is a parameter in MySQL that i...
CSS to achieve horizontal lines on both sides of the middle text
1. The vertical-align property achieves the follo...
Vue implements file upload and download functions
This article example shares the specific code of ...
WeChat Mini Program User Authorization Best Practices Guide
Preface When developing WeChat applets, you often...
Linux directory switching implementation code example
Switching files is a common operation in Linux. W...
Detailed explanation of the installation and use of Linux scheduled tasks crontabs
Install crontab yum install crontabs CentOS 7 com...
JavaScript implements draggable modal box
This article shares the specific code of JavaScri...
The latest Linux installation process of tomcat8
Download https://tomcat.apache.org/download-80.cg...
Ant designing vue table to achieve a complete example of scalable columns
Perfect solution to the scalable column problem o...