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

Detailed usage of Linux text search command find

The find command is mainly used to find directori...

Using css-loader to implement css module in vue-cli

【Foreword】 Both Vue and React's CSS modular s...

Specific use of Node.js package manager npm

Table of contents Purpose npm init and package.js...

How to modify the root password of mysql in docker

The first step is to create a mysql container doc...

Detailed example of MySQL exchange partition

Detailed example of MySQL exchange partition Pref...

How to use html table (to show the visual effect of web page)

We know that when using HTML on NetEase Blog, we ...

VMware virtualization kvm installation and deployment tutorial summary

Virtualization 1. Environment Centos7.3 Disable s...

Steps to install GRUB on Linux server

How to Install GRUB for Linux Server You cannot u...

MySQL Workbench download and use tutorial detailed explanation

1. Download MySQL Workbench Workbench is a graphi...

Illustration-style website homepage design New trend in website design

You can see that their visual effects are very bea...

How to enable remote access in Docker

Docker daemon socket The Docker daemon can listen...

Write a publish-subscribe model with JS

Table of contents 1. Scene introduction 2 Code Op...

Detailed explanation of JavaScript object-oriented practice: encapsulation and dragging objects

Table of contents Overview 1. How to animate a DO...

One command lets you understand the common parameters of the read command in the shell

We know that there are two ways to receive incomi...

Tips for List Building for Website Maintenance Pages

And, many times, maintenance requires your website...