JavaScript to achieve progress bar effect
|
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
Recommend
How to hide and remove scroll bars in HTML
1. HTML tags with attributes XML/HTML CodeCopy co...
Detailed explanation of the use of bus in Vue
Vue bus mechanism (bus) In addition to using vuex...
In-depth analysis of Vue's responsive principle and bidirectional data
Understanding object.defineProperty to achieve re...
Three principles of efficient navigation design that web designers must know
Designing navigation for a website is like laying...
Initial summary of the beginner's website building tutorial
After writing these six articles, I started to fee...
How to view the type of mounted file system in Linux
Preface As you know, Linux supports many file sys...
Implementation of Element-ui Layout (Row and Col components)
Table of contents Basic instructions and usage An...
Sample code for displaying reminder dots in the upper left or upper right corner using CSS3
Effect picture (if you want a triangle, please cl...
Detailed tutorial on installing MySQL 8 in CentOS 7
Prepare Environmental information for this articl...
Docker compose custom network to achieve fixed container IP address
Due to the default bridge network, the IP address...
15 important variables you must know about MySQL performance tuning (summary)
Preface: MYSQL should be the most popular WEB bac...
The difference between Readonly and Disabled
To summarize: Readonly is only valid for input (te...
CSS screen size adaptive implementation example
To achieve CSS screen size adaptation, we must fi...
Several ways to implement CSS height changing with width ratio
[Solution 1: padding implementation] principle: I...
SQL implementation of LeetCode (183. Customers who have never placed an order)
[LeetCode] 183.Customers Who Never Order Suppose ...