Native JS to achieve digital table special effects
|
This article shares a digital clock effect implemented with native JS. The effect is as follows:
The numbers above are generated using the following 10 images:
The implementation code is as follows, you are welcome to copy and paste.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Native JS to achieve digital table special effects</title>
<style>
body {
background: blue;
color: white;
font-size: 30px;
}
#div1 {
width: 220px;
height: 36px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px #FFF solid;
}
#div1 img {
width: 25px;
height: 36px;
position: relative;
}
</style>
<script>
window.onload = function () {
//Get all the pictures var aImg = document.getElementsByTagName('img');
//Get the local time object var oDate = new Date();
//Hours + minutes + seconds var prevStr = toZero(oDate.getHours()) +
toZero(oDate.getMinutes()) +
toZero(oDate.getSeconds());
//Declare the string variable for the next time var nextStr = '';
//The number of seconds that change at the same time may be multiple digits, so create an array to store it. var arr = [];
var timer = null;
//The src address of the i-th img picture is the picture name corresponding to the i-th digit of the current time under img //104604=>Get the characters from 1 to 6 respectively through charAt(i), that is, 1, 0, 4, 6, 0, 4
for (var i = 0; i < aImg.length; i++) {
aImg[i].src = 'images/' + prevStr.charAt(i) + '.png';
};
//Set the timer to execute the toChange method once every 1 second setInterval(toChange, 1000);
//Get the next time function toChange() {
//Get the local time object var oDate = new Date();
//Hours + minutes + seconds nextStr = toZero(oDate.getHours()) +
toZero(oDate.getMinutes()) +
toZero(oDate.getSeconds());
//Compare the previous time with the next time toCom(prevStr, nextStr);
//Assign the next 1 second to the current time, and keep changing prevStr = nextStr;
};
//Compare the last time with the next time function toCom(str1, str2) {
// Before comparison, clear the previous value and reassign arr = [];
//Traverse each digit of the first time for (var i = 0; i < str1.length; i++) {
//If one character is different from the character corresponding to the next time if (str1.charAt(i) != str2.charAt(i)) {
//Push it into the array arr.push(i);
}
}
//Execute image flip startMove();
};
//Image flip function function startMove() {
//Image height 36px, set the second reduction to -4px
var iSpeed = -4;
//Set the timer timer = setInterval(function () {
//Loop through the strings in the array whose last and next times have changed for (var i = 0; i < arr.length; i++) {
//If the image height of the name corresponding to the different characters in the array is equal to 0
if (aImg[arr[i]].offsetHeight == 0) {
//Set the change speed to increase by 4px
iSpeed = 4;
//The image position corresponding to the name of different characters is equal to the image name corresponding to the i-th digit of the next time in img //i represents the digit where the two time changes are located, arr[i] gets the specific number aImg[arr[i]].src = 'images/' + nextStr.charAt(arr[i]) + '.png';
}
//The height of the picture corresponding to the name of the different characters in the array is equal to its content height minus 4px each time
//Note the height of style.height and offsetHeight aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + iSpeed + 'px';
//The top value of the picture corresponding to the name of the different characters in the array is equal to half of its content height minus 18px
//To ensure that each time the picture changes, it can be displayed in the center aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight / 2 - 18 + 'px';
//When the image height reaches the maximum height of 36pxif (aImg[arr[i]].offsetHeight == 36) {
//Clear timer clearInterval(timer);
}
}
}, 10);
};
//Get the local time. If the unit digit is less than 10, and the tens digit is 0, there is no such thing. Here is the encapsulated function toZero(num) {
if (num < 10) {
return '0' + num;
} else {
return '' + num;
}
}
};
</script>
</head>
<body>
<div id="div1">
<img src="images/0.png" />
<img src="images/0.png" />:
<img src="images/0.png" />
<img src="images/0.png" />:
<img src="images/0.png" />
<img src="images/0.png" />
</div>
</body>
</html> 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:
|
<<: Analysis of the process of deploying Python applications in Docker containers
>>: Summary of several error logs about MySQL MHA setup and switching
Recommend
Analysis of Nginx Rewrite usage scenarios and configuration methods
Nginx Rewrite usage scenarios 1. URL address jump...
Detailed explanation of MySQL cluster: one master and multiple slaves architecture implementation
Experimental environment: 1. Three CentOS 7 serve...
Implementing countdown effect with javascript
Use Javascript to achieve the countdown effect, f...
Vuex combines session storage data to solve the problem of data loss when refreshing the page
Table of contents Preface 1. Reasons: 2. Solution...
CSS3 speeds up and delays transitions
1. Use the speed control function to control the ...
How to install theano and keras on ubuntu system
Note: The system is Ubuntu 14.04LTS, a 32-bit ope...
vue-router history mode server-side configuration process record
history route History mode refers to the mode of ...
How to use a game controller in CocosCreator
Table of contents 1. Scene layout 2. Add a handle...
MySQL slow query pitfalls
Table of contents 1. Slow query configuration 1-1...
jQuery canvas generates a poster with a QR code
This article shares the specific code for using j...
CSS3 realizes the glowing border effect
Operation effect: html <!-- This element is no...
How to open ports to the outside world in Alibaba Cloud Centos7.X
In a word: if you buy a cloud server from any maj...
Essential tools for web design: Firefox Web Developer plugin CSS tool set tutorial
The plugin is installed in the Firefox browser. T...
JavaScript microtasks and macrotasks explained
Preface: js is a single-threaded language, so it ...
Tutorial on installing Ubuntu 1804 in VMware Workstation 15 Pro (with pictures and text)
This note is an installation tutorial. It has no ...