This article example shares the specific code of JavaScript to achieve the progress bar effect for your reference. The specific content is as follows The effect picture this time is as follows: This example is not difficult to do. When I practiced, the new knowledge point was to use the The general idea is to initially put a div box with a width of 0 in a div box, and then use a timer in the button's The code is as follows: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #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; } </style> </head> <body> <div id="container"> <div id="box" data-content-before="22"> <div id="cont"></div> </div> <div id="text">0%</div> <button id="btn">Submit</button> </div> <script> 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); } </script> </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:
|
<<: How to install MySQL for beginners (proven effective)
>>: Implementation of CSS fixed layout on both sides and adaptive layout in the middle
Let me first talk about the implementation steps:...
This article example shares the specific code of ...
Comments and messages were originally a great way...
principle The principle of anti-shake is: you can...
<br /> Focusing on the three aspects of text...
Table of contents 1. Environmental Preparation 2....
Scenario: The interaction methods between parent ...
User table, ID number must be unique, mobile phon...
Preface Vue (pronounced /vjuː/, similar to view) ...
The description of echo in the Linux help documen...
We all know that we can use the mkdir command to ...
This article example shares the specific code of ...
<br />Choose the most practical one to talk ...
Import and export of Docker images This article i...
The data URI scheme allows us to include data in a...