Javascript 使用向下箭头键更改条形图的值

嘿嘿,

我已经在css中创建了条形图，现在我编写了代码，所以当你按下箭头键时，你会看到条形图上的值在变化。现在我想，当你按下箭头键时，数值会发生变化，当你按下箭头键时，在你松开按钮的点上，这些条会停止上升。。。。。有人知道怎么做吗

这是我的代码现在在一个脚本中

window.onkeydown = function(e){
if(e.keyCode == 40){
    changeIdValue("balklongwaarde", "60px");
};
}

这就是我的css中的条形图

/*bar for lungs*/
#balklongwaarde{
height: 150px;
width: 40px;
border: 1px solid #2e9afe;
background: #2e9afe;
position: absolute;
margin-top: 200px;
margin-left: 200px;
}

这也是我的动画了

* {
-webkit-transition:1s 0s all ease;
   -moz-transition:1s 0s all ease;
     -o-transition:1s 0s all ease;
        transition:1s 0s all ease;

---

您可以使用setInterval模拟按下的键，例如

var intervalID;
//through arrow down values are changing//
window.onkeydown = function(e){
    if(e.keyCode == 40){
        if(typeof intervalID == 'undefined') {
            intervalID = window.setInterval(changeIdValue, 10);       
        }

    };
}

---

函数changeIdValue还不清楚，通常这种增加/减少值应该考虑一些最小值和最大值。动画在60px处停止。你能做一个小提琴吗。如果你需要允许用户将值调整1，在这种情况下，你不应该使用transition，当两个键下笔划之间的步长大于1时，“过渡”效果最佳，过渡计时功能也应为线性。