JavaScript to achieve progress bar effect

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 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 in the button's onclick callback function to change its width value

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:
  • Several methods of javascript progress bar
  • How to implement progress bar in js
  • JavaScript to achieve web page loading progress bar code is super simple
  • js progress bar implementation code
  • JS progress bar effect implementation code organization
  • JS realizes the effect of circular progress bar (from 0 to 100%)
  • Simple progress bar control written in Javascript jquery css
  • Progress bar effect implemented with CSS+JS
  • js realizes audio control progress bar function
  • Using Session with Javascript in PHP to implement file upload progress bar function

<<:  How to install MySQL for beginners (proven effective)

>>:  Implementation of CSS fixed layout on both sides and adaptive layout in the middle

Recommend

Solution to ES memory overflow when starting docker

Add the jvm.options file to the elasticsearch con...

Detailed explanation of the difference between routing hooks in Vue2.x and Vue3.x

Table of contents vue2.x Pre-concept: Routing hoo...

Learn javascript iterator

Table of contents Introduction What does an itera...

Practical record of optimizing MySQL tables with tens of millions of data

Preface Let me explain here first. Many people on...

Detailed analysis of SQL execution steps

Detailed analysis of SQL execution steps Let'...

HTML uses marquee to achieve text scrolling left and right

Copy code The code is as follows: <BODY> //...

The cloud server uses Baota to build a Python environment and run the Django program

Table of contents Install Pagoda Configure Python...

Summary of English names of Chinese fonts

When using the font-family property in CSS to ref...

How to use CSS3 to implement a queue animation similar to online live broadcast

A friend in the group asked a question before, th...

How to manage large file uploads and breakpoint resume based on js

Table of contents Preface Front-end structure Bac...

How to understand the difference between computed and watch in Vue

Table of contents Overview computed watch monitor...

JavaScript code to implement a simple calculator

This article example shares the specific code of ...

How to monitor the running status of docker container shell script

Scenario The company project is deployed in Docke...

Implementation steps for building a MySQL master-slave replication environment based on Docker

1. Introduction The previous program architecture...

Introduction and examples of hidden fields in HTML

Basic syntax: <input type="hidden" na...