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;}
}

它只能工作一次。当我再次单击“验证”按钮时，没有任何反应。只有当我更改错误的身份证号码时，它才有效但只有一次，然后再次使其工作你需要正确的...我知道这可能是因为我＆＃39 ; m设置一次css属性，如果它们相同，浏览器将不会再次更改它们。但我无法想到正确的解决方案，因为我是JS和css的新手。我搜索了很长时间但仍未找到解决问题的方法，部分原因是因为我不知道如何指定它。我很感激你的帮助。

PS。请只有纯粹的js和css - 我还不熟悉jquery

Answer 1

问题是，如果元素已经具有样式=＆＃34; anim1 5s＆＃34;例如 - 再次将其设置为相同的值将不起作用。您需要删除该样式，然后再次添加。

更好的是，当您添加样式时，向该元素添加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
    }
}

短时间改变颜色JavaScript＆amp; CSS

1 个答案: