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
The find command is mainly used to find directori...
【Foreword】 Both Vue and React's CSS modular s...
Table of contents Purpose npm init and package.js...
The first step is to create a mysql container doc...
Detailed example of MySQL exchange partition Pref...
We know that when using HTML on NetEase Blog, we ...
Virtualization 1. Environment Centos7.3 Disable s...
How to Install GRUB for Linux Server You cannot u...
1. Download MySQL Workbench Workbench is a graphi...
You can see that their visual effects are very bea...
Docker daemon socket The Docker daemon can listen...
Table of contents 1. Scene introduction 2 Code Op...
Table of contents Overview 1. How to animate a DO...
We know that there are two ways to receive incomi...
And, many times, maintenance requires your website...