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

How to use CSS to display multiple images horizontally in the center

Let me first talk about the implementation steps:...

Implementing a simple calculator with javascript

This article example shares the specific code of ...

Nofollow makes the links in comments and messages really work

Comments and messages were originally a great way...

JavaScript anti-shake case study

principle The principle of anti-shake is: you can...

Ten Experiences in Presenting Chinese Web Content

<br /> Focusing on the three aspects of text...

MySQL full-text search usage examples

Table of contents 1. Environmental Preparation 2....

Vue custom component implements two-way binding

Scenario: The interaction methods between parent ...

mysql implements the operation of setting multiple primary keys

User table, ID number must be unique, mobile phon...

How to call the browser sharing function in Vue

Preface Vue (pronounced /vjuː/, similar to view) ...

Linux echo text processing command usage and examples

The description of echo in the Linux help documen...

Briefly understand the two common methods of creating files in Linux terminal

We all know that we can use the mkdir command to ...

Small program to implement a simple calculator

This article example shares the specific code of ...

Personal opinion: Talk about design

<br />Choose the most practical one to talk ...

Docker image import and export code examples

Import and export of Docker images This article i...

Introduction to using data URI scheme to embed images in web pages

The data URI scheme allows us to include data in a...