Question

我想在项目中使用物化来添加进度条，并且我想单击按钮来启动进度条，以使它从头到尾一直运行。这是我的html进度条代码：

<div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue-only">
        <div class="circle-clipper left">
            <div class="circle"></div>
        </div><div class="gap-patch">
        <div class="circle"></div>
    </div><div class="circle-clipper right">
        <div class="circle"></div>
    </div>
    </div>
</div>

例如，单击按钮后如何将其停用并重新激活？

Answer 1

您尝试过

<button onclick="myFunction()">Click me</button>

按照https://www.w3schools.com/jsref/event_onclick.asp

Answer 2

进度条上的id（假设为id="loader"），因此您的代码如下所示：

<div id="loader" class="preloader-wrapper big active">
   [...]

并使用以下脚本切换其display属性：

function toggleLoader() {
    var x = document.getElementById("loader");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

将此脚本链接到按钮以触发它，方法是：

<button onclick="toggleLoader()">Click Me</button>

工作示例：

function toggleLoader() {
    var x = document.getElementById("loader");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<button onclick="toggleLoader()">Click Me</button>


<svg id="loader" width="64px" height="64px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling" style="display:none;"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#3be8b0" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(149.836 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>

Answer 3

为<svg> <circle>元素中的动画标签分配一个ID，然后像使用任何其他HTML元素一样简单地将其停用

<animateTransform id="progressBarAnimation" attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>

然后做

document.getElementById("progressBarAnimation").type = "none";

如何使用javascript中的按钮激活进度栏？

3 个答案: