onclick 函数参数

Question

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

它可以满足我的需要，但是我不确定如何应用它以便可以通过按钮触发它。该脚本在定义函数时使用参数输入编写，然后在 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 定义行。此外，Joshua Davison 回答了我的主要问题。 "The onclick callback doesn't provide arguments, so we wrap the function call in an anonymous function (that takes no arguments)" 所以我在 java 脚本中分配按钮的选项是：

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

并使用事件侦听器：

loadSim_btn.addEventListener("click", 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

你必须定义 obj.
像这样写：
var obj = document.getElementById(pCent);
在load_Sim

的顶部

Answer 3

onclick 回调不提供参数，因此我们将函数调用包装在匿名函数中（不带参数）

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

我还可以建议您使用事件侦听器而不是使用 onclick

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

最后，如果可能的话，最好使用 getElementById("btnId") 而不是使用 getElementsByTagName(...)[0]（只有一个元素应该具有该 ID）- 并将 id="btnId" 添加到 HTML

我希望一切顺利（发自我的 phone）。

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 函数参数

Onclick function arguments

javascript

counter

arguments

function

onclick