javascript - 短时间内改变颜色 JavaScript 和 CSS

Question

我正在使用 javascript 做简单的 ID 验证 html 页面。我的想法是，每当用户输入有效的 ID 号时，表单的文本字段会改变颜色几秒钟，然后恢复正常。

代码

<script>
var abcArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
var IDweights = [7,3,1,0,7,3,1,7,3];
var valuesMap = new Map();
for(var i=0;i<26;i++){
    valuesMap.set(abcArray[i],i+10);
}
validateID();

function validateID(){
    var idNumber = document.forms.form.idnum.value.toUpperCase();
    var sumOfValues = 0;

    for(var x = 0; x < idNumber.length; x++){
        if(x < 3){
            sumOfValues += (valuesMap.get(idNumber.charAt(x))*IDweights[x]);
        } 
        if(x > 3){  
            sumOfValues += (parseInt(idNumber.charAt(x))*IDweights[x]);
        }
    }
    if(sumOfValues % 10 == idNumber[3]){
        var y = document.getElementById("idnum");
        y.style.animation = "anim 5s";   // when true change to green 
    } else {
        var y = document.getElementById("idnum");
        y.style.animation = "anim1 5s"; //change to red
    }
}

CSS部分

@-webkit-keyframes anim {
0% {background:white;}
20% {background:green;}
100% {background:white;}
}
@-moz-keyframes anim {
0% {background:white;}
20% {background:green;}
100% {background:white;}
}
@-webkit-keyframes anim1 {
0% {background:white;}
20% {background:red;}
100% {background:white;}
}
@-moz-keyframes anim1 {
0% {background:white;}
20% {background:red;}
100% {background:white;}
}

它有效但只有一次。当我再次单击验证按钮时，什么也没有发生。只有当我更改了错误的 ID 号时，它才起作用，但也只有一次，然后再次使其起作用，您需要输入正确的 ID 号……我知道这可能是因为我设置了一次 css 属性就是这样，如果它们相同，浏览器将不会再次更改它们。但是我想不出合适的解决方案，因为我是 JS 和 css 的新手。我搜索了很长时间，但仍然没有找到解决我问题的方法，部分原因是我真的不知道如何指定它。我会很感激你的帮助。

附言。请只使用纯 js 和 css - 我还不熟悉 jquery

Answer 1

问题是，例如，如果元素已经具有 style="anim1 5s"- 再次将其设置为相同的值将无济于事。您需要删除该样式，然后重新添加。

更好的是，当您添加样式时，添加一个 animationend该元素的事件监听器在动画完成时删除该动画

function validateID() {
    var doneAnimating = function(e) {
        // remove the listener
        this.removeEventListener('animationend', doneAnimating);
        // remove the animate style
        this.style.animate = '';
    }
    var idNumber = document.forms.form.idnum.value.toUpperCase();
    var sumOfValues = 0;

    for (var x = 0; x < idNumber.length; x++) {
        if (x < 3) {
            sumOfValues += (valuesMap.get(idNumber.charAt(x)) * IDweights[x]);
        }
        if (x > 3) {
            sumOfValues += (parseInt(idNumber.charAt(x)) * IDweights[x]);
        }
    }
    // moved outside of if/then to tidy up code
    var y = document.getElementById("idnum");
    // add the listener to the element
    y.addEventListener('animationend', doneAnimating);
    if (sumOfValues % 10 == idNumber[3]) {
        y.style.animation = "anim 5s"; // when true change to green 
    } else {
        y.style.animation = "anim1 5s"; //change to red
    }
}

或者，您可以简单地(在此代码之外)添加一次 animationend 事件监听器，而 doneAnimating 可以简单地删除动画样式而不用担心删除事件监听器 - 事实上，您可以将事件处理程序内联以使其变得非常简单

// this is done once only - not sure where in your code you'd put it
document.getElementById("idnum").addEventListener('animationend', function(e) {
    this.style.animate = '';
});

function validateID() {
    var idNumber = document.forms.form.idnum.value.toUpperCase();
    var sumOfValues = 0;

    for (var x = 0; x < idNumber.length; x++) {
        if (x < 3) {
            sumOfValues += (valuesMap.get(idNumber.charAt(x)) * IDweights[x]);
        }
        if (x > 3) {
            sumOfValues += (parseInt(idNumber.charAt(x)) * IDweights[x]);
        }
    }
    // moved outside of if/then to tidy up code
    var y = document.getElementById("idnum");
    if (sumOfValues % 10 == idNumber[3]) {
        y.style.animation = "anim 5s"; // when true change to green 
    } else {
        y.style.animation = "anim1 5s"; //change to red
    }
}