jQuery / Svg:按下键时增加值“dur”

时间:2015-03-12 17:34:52

标签: javascript jquery svg increment keycode

当我按一个键时,我想提高元素#Object的速度。

HTML代码:

<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FF6600">
    <animateTransform id="object" attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="3s" repeatCount="indefinite" />
</path>

剧本:

window.addEventListener("keydown", checkKeyPressed, false);

function checkKeyPressed(e) {
    if (e.keyCode == "38") {
        var getTheSpeed = parseInt(document.getElementById("object").dur, 10);
        getTheSpeed = isNaN(getTheSpeed) ? 3 : getTheSpeed;
        getTheSpeed++;
        document.getElementById("object").dur = getTheSpeed;
    }
}

我的问题是dur不仅取数值。必须指定秒“s”。所以,我实际上无法使用isNaN属性:(

我是JavaScript的初学者^^'
有人有解决方案来运行这个脚本吗? Ty&lt; 3

1 个答案:

答案 0 :(得分:0)

更改以下行

var getTheSpeed = parseInt(document.getElementById("object").getAttribute("dur").slice(0,-1), 10);

(这将从&#34的当前值中删除s; dur&#34;使用slice(0,-1)

document.getElementById("object").setAttribute("dur",String(getTheSpeed) + "s");

(这将设置新的递增值,并使用字符串连接+ "s"添加s)

检查一下 - 希望它有所帮助^^

&#13;
&#13;
window.addEventListener("keydown", checkKeyPressed, false);

function checkKeyPressed(e) {
    if (e.keyCode == "38") {
        var getTheSpeed = parseInt(document.getElementById("object").getAttribute("dur").slice(0, -1), 10);
        getTheSpeed = isNaN(getTheSpeed) ? 3 : getTheSpeed;
        getTheSpeed++;
        document.getElementById("object").setAttribute("dur", String(getTheSpeed) + "s");
        alert(document.getElementById("object").getAttribute("dur"));
    }
}
&#13;
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#FF6600">
    <animateTransform id="object" attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="3s" repeatCount="indefinite" />
</path>
&#13;
&#13;
&#13;