진행 표시줄을 제어하는 JavaScript의 분석 예-JS 튜토리얼-php.cn

진행 표시줄을 제어하는 JavaScript의 분석 예

黄舟

풀어 주다： 2017-11-21 11:36:52

원래의

1473명이 탐색했습니다.

앞서 JavaScript에서 진행률 표시줄을 구현하는 방법과 진행률 표시줄을 기본적으로 구현하는 방법을 소개했는데, 진행률 표시줄을 제어하는 방법은 무엇일까요? 진행률 표시줄을 제어하기 위해 JS에서 사용하는 요소는 비교적 간단합니다. p 태그 내에 범위 태그를 삽입하면 됩니다. p의 외부 레이어는 배경으로 사용되며, 범위의 내부 레이어는 제어되는 동적 진행률 표시에 사용됩니다. JS로.

전체 코드는 다음과 같습니다.

<!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>

로그인 후 복사

표시의 편의를 위해 html 문서에 css 텍스트와 js 스크립트를 직접 작성했습니다. 이는 진행률 표시줄을 제어하는 기본 js 방식입니다. 또한 Node.js 또는 mootools와 같은 js 라이브러리를 사용하여 작성하세요.

SetProgressOne()은 그림을 사용하여 진행 상황을 표시하고, SetProgressTwo()는 색상을 사용하여 진행 상황을 표시하며, 모두 JS를 통해 스팬 태그의 속성을 제어합니다. style="width: default value %"이면 충분합니다. . 성능 측면에서 색상을 사용하는 것보다 이미지를 사용하는 것이 더 좋습니다. 모든 브라우저가 CSS의 둥근 모서리 속성을 지원하는 것은 아니기 때문입니다.

진행 표시줄을 제어하는 JavaScript의 분석 예