Home > Article > Web Front-end > Example analysis of JavaScript controlling progress bar

Example analysis of JavaScript controlling progress bar

黄舟Original: 2017-11-21 11:36:521416browse

Before us, we introduced to you JavaScriptmethods to implement progress bar and implement the progress bar natively. So how to control the progress bar? The elements used by JS to control the progress bar are relatively simple. Just embed a span tag within a p tag. The outer layer of p is used as the background, and the inner layer of span is used for dynamic progress display, which is controlled by JS.

The overall code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JS控制进度条</title>
    <style type="text/css">
        body
        {
            height:30px;
            width:330px;
            background-color:blue;
        }
        
        #ProgressBarBackgroundOne
        {
            background:url(ProgressBk.png) no-repeat 0 center;
            height:10px;
            width:300px;
        }
        #ProgressBarOne
        {
            background:url(ProgressFt.png) no-repeat 0 center;
            height:10px;
            width:0%;
            display:block;
        }
        
        #ProgressBarBackgroundTwo
        {
            background-color:White;
            height:10px;
            width:300px;
        }
        #ProgressBarTwo
        {
            background-color:Gray;
            height:10px;
            width:0%;
            display:block;
        }
        
    </style>
    <script type="text/javascript">
        var numOne = 0;
        var numTwo = 0;
        function SetProgressOne() {
            var ProgressOne = document.getElementById(&#39;ProgressBarOne&#39;);
            if (numOne < 100) {
                numOne = numOne + 1; 
             }
             ProgressOne.setAttribute(&#39;style&#39;, &#39;width:&#39; + numOne + &#39;%&#39;);
            setTimeout(SetProgressOne, 500);
        }

        function SetProgressTwo() {
            var ProgressTwo = document.getElementById(&#39;ProgressBarTwo&#39;);
            if (numTwo < 100) {
                numTwo = numTwo + 1;
            }
            ProgressTwo.setAttribute(&#39;style&#39;, &#39;width:&#39; + numTwo + &#39;%&#39;);
            setTimeout(SetProgressTwo, 500);
        }
        
    </script>
</head>
<body>
<p id="ProgressBarBackgroundOne"><span id="ProgressBarOne"></span></p>
<p id="ProgressBarBackgroundTwo"><span id="ProgressBarTwo"></span></p>
</body>
<script type="text/javascript">
    SetProgressOne();
    SetProgressTwo();
</script>
</html>

In order to facilitate display, I wrote the css text and js script directly in the html document, This is a native js way to control the progress bar. It can also be written using js libraries such as Node.js or mootools.

SetProgressOne() uses pictures to display progress; SetProgressTwo() uses color to display progress. The principle is the same, and they all control the attributes of the span tag through JS: style="width :Default value %" is enough. In terms of performance, using images is better than using colors, because it is difficult to use colors to handle rounded corners. Not all browsers support the rounded corner properties of CSS. Here is a comparison of the effects:

Example analysis of JavaScript controlling progress bar

Summary:

Through the detailed study of this article, I believe that my friends have a better understanding of JavaScript control progress bar. I hope it will help you Work helps!

Related recommendations:

Example of JavaScript progress bar control implementation

Introduction to several methods of implementing progress bars in JavaScript

JavaScript implements the native code of the progress bar

The above is the detailed content of Example analysis of JavaScript controlling progress bar. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：5 JS practical function code snippets that can be used directlyNext article：5 JS practical function code snippets that can be used directly

See more

Example analysis of JavaScript controlling progress bar

Related articles