집 > 기사 > 웹 프론트엔드 > 진행 표시줄을 제어하는 JavaScript의 분석 예

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

黄舟원래의: 2017-11-21 11:36:521455검색

앞서 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의 분석 예

요약:

이 기사의 자세한 연구를 통해 친구들이 JavaScript 제어 진행률 표시줄에 대해 더 잘 이해할 수 있을 것이라고 믿습니다.

관련 권장사항:

JavaScript 진행률 표시줄 제어 구현의 예

진행률 표시줄의 여러 JavaScript 구현 방법 소개

JavaScript 구현 진행 바의 네이티브 코드

위 내용은 진행 표시줄을 제어하는 JavaScript의 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：직접 사용할 수 있는 JS 실용적인 함수 코드 5가지다음 기사：직접 사용할 수 있는 JS 실용적인 함수 코드 5가지

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

관련 기사

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