Question

我正在尝试在页面加载时创建进度条。我创建此html page当我在chrome中测试此页面当前工作但在ff中：max with progress bar是50％。我没有任何错误控制台。如何解决这个问题？ `

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />


    <title></title>

    <!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->

    <link href="bootstrap_Cerulean.min.css" rel="stylesheet" />
    <script>
        var repeat = true;

        var bootstrap = false;
        function fifteen() {
            document.getElementsByClassName("progress-bar")[0].setAttribute("style", "width:50%");
            //document.getElementsByClassName("progress-bar")[0].style.width = "width:50%";

        }

        function sixteen() {
            if ( bootstrap != true) {
                document.getElementsByClassName("progress-bar")[0].setAttribute("style", "width:70%");

            }
        }

        var i = 0;
        function onehundred() {
            if (bootstrap === true) {
                document.getElementsByClassName("progress-bar")[0].setAttribute("style", "width:100%");
                console.log(++i);
            }
        };

        function hideandShow() {
            document.getElementsByClassName("progress")[0].style.display = "none";
            document.getElementById("content").className = "";
        }

        function clear() {
            if (document.getElementsByClassName("progress-bar")[0].style.width === "100%") {
                    clearInterval(r1);
                    clearInterval(r2);
                    clearInterval(r3);
                    setTimeout(hideandShow, 500);


            }
        }
        //repeet this work 

          var r1=  setInterval(function () { sixteen(); }, 100);
          var r2=  setInterval(function () { onehundred(); }, 100);
          var r3 = setInterval(function () { clear(); }, 100);
    //if width of progressbar is 100% then delete progressbar and display content
    </script>

</head>



<body onload="fifteen();">



    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        </div>
    </div>
    <div id="content" class="hidden">   


    <div class="effeckt">
        <figure class="effeckt-caption" data-effeckt-type="quarter-slide-up">
            <img src="ic_launcher.jpg" alt="">
            <figcaption>
                <div class="effeckt-figcaption-wrap">
                    <h3>عنوان تصویر </h3>
                    <p>توضیح تصویر</p>
                </div>
            </figcaption>
        </figure>
    </div>

        </div>
    <script src="jquery.js"></script>
    <script src="bootstrap.min.js"></script>
</body>
</html>

`

Answer 1

尝试这种方式

    var repeat = true;
    var bootstrap = false;
    var r1=  null;
      var r2=  null;
      var r3 =null;
    function fifteen() {
        document.getElementsByClassName("progress-bar")[0].setAttribute("style", "width:50%");
        //document.getElementsByClassName("progress-bar")[0].style.width = "width:50%";
        r1=  setTimeout(function () { sixteen(); }, 100);
    }

    function sixteen() {
        if ( bootstrap != true) {
            document.getElementsByClassName("progress-bar")[0].setAttribute("style", "width:70%");
            r2=setTimeout(function () { onehundred(); }, 100);
        }
    }

    var i = 0;
    function onehundred() {
        if (bootstrap != true) {
            document.getElementsByClassName("progress-bar")[0].setAttribute("style", "width:100%");
            console.log(++i);
            r3 = setTimeout(function () { clear(); }, 100);
        }
    };

    function hideandShow() {
        document.getElementsByClassName("progress")[0].style.display = "none";
        document.getElementById("content").className = "";
    }

    function clear() {
        if (document.getElementsByClassName("progress-bar")[0].style.width === "100%") {
                clearTimeout(r1);
                clearTimeout(r2);
                clearTimeout(r3);
                setTimeout(hideandShow, 500); 
        }
    }

一些java脚本代码目前在firefox中不起作用

1 个答案: