Question

我正在尝试模拟从0到100的数字，我遇到了问题。首先，我尝试使用for循环并将迭代值发送到.innerHTML div但它只显示最后一个数字。所以我在网上搜索了一个动画javascript计数器，我找到了这个：the graph。

它适用于我的需要但是我不知道如何应用它以便它可以通过按钮触发。在定义函数时，此脚本使用参数输入编写，然后通过在wards之后运行函数来传递它们。我无法弄清楚如何为onclick事件输入参数？这是我的尝试，但我不断收到错误，特别是onclick行。

var loadSim_btn = document.getElementsByTagName('button')[0];

loadSim_btn.onclick=function load_Sim(pCent, 25, 100, 2000);

function load_Sim (pCent, start, end, duration) {
  var range = end - start;
        // no timer shorter than 50ms (not really visible any way)
        var minTimer = 50;
        // calc step time to show all interediate values
        var stepTime = Math.abs(Math.floor(duration / range));
        // never go below minTimer
        stepTime = Math.max(stepTime, minTimer);
        // get current time and calculate desired end time
        var startTime = new Date().getTime();
        var endTime = startTime + duration;
        var timer;

        function run() {
            var now = new Date().getTime();
            var remaining = Math.max((endTime - now) / duration, 0);
            var value = Math.round(end - (remaining * range));
            obj.innerHTML = value;
            if (value == end) {
                clearInterval(timer);
            }
        }

        timer = setInterval(run, stepTime);
        run();
    }

解答： 所以从我能说的一个问题是我忘记了obj定义行。此外，约书亚戴维森回答了我的主要问题。＆＃34; onclick回调没有提供参数，所以我们将函数调用包装在一个匿名函数中（不带参数）＆＃34; 所以我在java脚本中分配按钮的选项是：

loadSim_btn.onclick = function（）{load_Sim（pCent，25,100,2000）; }

并使用事件监听器：

loadSim_btn.addEventListener（＆＃34;点击＆＃34;，function（）{load_Sim（pCent， 25,100,2000）; }，true）;

Answer 1

添加一个按钮并附加与onclick处理程序相同的功能。像<button type="button" onclick="animateValue('value', 0, 100, 2000)">Click</button>一样。请检查此工作Fiddle。

Answer 2

onclick回调不提供参数，所以我们将函数调用包装在一个匿名函数中（不带参数）

loadSim_btn.onclick=function() { load_Sim(pCent, 25, 100, 2000); }

我还建议你使用事件监听器而不是使用onclick

loadSim_btn.addEventListener("click", function() { load_Sim(pCent, 25, 100, 2000); }, true);

最后，不是使用getElementsByTagName(...)[0]，最好尽可能使用getElementById("btnId")（只有一个元素应该包含该ID） - 并将id="btnId"添加到HTML中的按钮

我希望结果不错（从我的手机发布）。

Answer 3

您必须定义obj 写下类似的东西：
var obj = document.getElementById(pCent);
位于load_Sim

的顶部

Answer 4

如 @Hector Barbossa 所示;这可以通过将 animateValue（'value'，0,100,2000） 添加到您的html按钮元素来实现。这里的工作示例JSFiddle。

<强> HTML：

<div id="value">0</div>
<button type = "button" onclick = "animateValue('value', 0, 100, 20000)">Click</button>

<强> CSS：

#value {
    font-size: 100px;
}

<强>使用Javascript：

function animateValue(id, start, end, duration) {

    var obj = document.getElementById(id);
    var range = end - start;
    var minTimer = 50;
    var stepTime = Math.abs(Math.floor(duration / range));

    stepTime = Math.max(stepTime, minTimer);

    var startTime = new Date().getTime();
    var endTime = startTime + duration;
    var timer;

    function run() {
        var now = new Date().getTime();
        var remaining = Math.max((endTime - now) / duration, 0);
        var value = Math.round(end - (remaining * range));
        obj.innerHTML = value;
        if (value == end) {
            clearInterval(timer);
        }
    }

    timer = setInterval(run, stepTime);
    run();
}

Onclick函数参数

4 个答案: