Native JS implements constantly changing labels and js labels

Native JS implements constantly changing labels and js labels

The GIF image captured on the right of the blog.

 

HTML:

<! DOCTYPE html> 
Css:
 <style>  .F-SlideFont-Box * { margin: 0; padding: 0; border: none; list-style: none; }  .F-SlideFont-Box { width: 300px; height: 300px; border: 1px black solid; position: relative; }  .F-SlideFont-Box-Tag { width: 90%; height: 90%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }  .F-SlideFont-Tag { position: absolute; display: block; padding: 3px 15px; background-color: #0078F7; border-radius: 10%; color: white; transition:all 1s linear; z-index: 0; transition: all .6s; cursor: pointer; } </style>
JS:
<Script src = "js/GlunefishLibrary. js "> </script> // introduced here is the random number that I sent along with <script> var tagObj = document. getElementsByClassName ('F-SlideFont-tag'), offset = true; for (var I = 0; I <tagObj. length; I ++) {(function (I) {tagObj [I]. onmouseover = function () {offset = false; index = parseInt (this. style. zIndex); this. style. zIndex = 9999;} tagObj [I]. onmouseout = function () {offset = true; this. style. zIndex = index ;}) (I) ;}setinterval (PreSeting, 5000) function PreSeting () {if (offset) {for (var I = 0; I <tagObj. length; I ++) {tagObj [I]. style. left = F_getSJS (, 10) + 'px '; // F_getSJS () comes from the previously introduced glunefishLibrary. js. For more information, see [I]. style. top = F_getSJS (, 10) + 'px '; tagObj [I]. style. backgroundColor = 'rgb ('+ F_getSJS (256,-256) +', '+ F_getSJS (256,-) +', '+ F_getSJS (,-) +', '+ F_getSJS) + ')'; tagObj [I]. style. zIndex = F_getSJS (200,0, 16) ;}}</script>
This effect mainly changes the tag style by taking random numbers between two numbers at intervals.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.