javascript - 带有单击的javascript进度条

Question

嗨，我需要一个进度条，每 0.1 秒更新一次，填充 0.1%，单击网站上的任何位置时也会填充 1%。我已经有了这个，但我不能通过点击来填充它。我尝试了这么久没有任何进展。

                var i = 0;
                function move() {
                    
                    if (i == 0) {
                        i = 1;
                        var elem = document.getElementById("myBar");
                        var width = 1;
                        var id = setInterval(frame, 100);
                        
                        
                        
                        function frame() {
                            if (width >= 100) {
                                clearInterval(id);
                                i = 0;
                            } 
                            else {
                                width+=0.1;
                                elem.style.width = width + "%";
                            }
                        }
                    }
                }
                

        <div id="myProgress">
            <div id="myBar"></div>
        </div>

任何想法如何做到这一点？

标签： javascript

Answer 1

您需要创建事件侦听器click并将width值加一。

elem.addEventListener('click', function() {
  width += 1;
})