我正在使用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
答案 0 :(得分: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
}
}