Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use JavaScript to achieve the progress bar effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use JavaScript to achieve the progress bar effect"!

The details are as follows

The effect this time is as follows:

This case is not difficult to do. In my practice, the new knowledge point is to use the window.getComputedStyle () function to get the width value of the element.

The general idea is to initially put a div box with a width of 0 in a div box, and then use a timer to change its width value in the onclick callback function of the button

The code is as follows:

Document # container {width: 500px; height: 200px; margin: 50px auto; position: relative;} # box {width: 260px; height: 30px; border: 1px pink solid; border-radius: 16px; margin-bottom: 20px; padding: 1px Overflow: hidden;} # cont {width: 0; height: 100%; background-color: pink; border-radius: 16px;} # btn {position: absolute; margin-left: 110px; width: 50px; height: 30px } # text {display: block; position: relative; left: 120px; margin-bottom: 20px;} 0% submit let box = document.getElementById ("box"); let btn = document.getElementById ("btn") Let cont = document.getElementById ("cont"); let text = document.getElementById ("text"); function getstyle (obj, name) {if (window.getComputedStyle) {return window.getComputedStyle (obj, null) [name];} else {return obj.currentStyle [name] }} btn.onclick = function () {let ini = 0; let num = setInterval (()) > {let tem = parseInt (window.getComputedStyle (cont, null) ["width"]); let now = tem + 26; if (tem > = 260) {console.log (now) ClearInterval (num); return;} cont.style.width = now + "px"; ini = ini + 10; text.innerText = ini + "%";}, 80) } at this point, I believe you have a deeper understanding of "how to achieve the progress bar effect with JavaScript". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.