我有一个小表单,您应该在其中键入您的出生年份。之后,你应该按下一个按钮,它会自动发现你是否在18岁以上,直到你的出生年份。问题是,当你按下按钮时,什么都不会发生。即使你把它留空,它仍然什么都不做,即使代码说它应该带有一个错误。
这是我的代码:
<div align="center">
<?php if(!isset($_COOKIE[ "usermobile"])) { ?>
<ul>
<li><a id="demo03" href="#modal-03">DEMO03 7</a>
</li>
</ul>
<!--DEMO03-->
<div id="modal-03" style="background-image:url(images/access.jpg); background-size:cover;">
<!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
<div id="btn-close-modal" class="close-modal-03">
<!--CLOSE MODAL-->
</div>
<div class="modal-content">
<br />
<br />
<br />
<br />
<br />
<br />
<img src="images/logo.png" />
<br />
<br />
<font color="#bfbaa8">Man skal være over 18 år, for at få adgang til denne side.<br />
<font size="+4">Indtast dit fødselsår</font>
<br />
<input maxlength="4" id="age_validation_input" size="33" align="middle" style="background-color: rgba(191, 186, 168, 0.8); border:none; height:90px; width:380px; color:#3d3b33; padding:15px; font-size:70px; font-weight:bold;" value="F.eks. 1963" onblur="onBlur(this);"
onfocus="onFocus(this);">
</font>
<br />
<input type="button" id="age_validation_btn" align="middle" style="background-color: rgba(99, 95, 82, 0.8); border:none; height:65px; width:410px; color:#c4bda4; font-size:40px; font-weight:bold;" value="OK her" />
<br />
<br />
<font size="-1" color="#69665b">Ved at klikke "OK" giver du tilladelse til, at webstedet benytter cookies.</font>
</div>
</div>
<?php } ?>
</div>
<script>
$('#age_validation_btn').on('click', function() {
var age = parseInt($('#age_validation_input').val(), 10);
var currentYear = (new Date).getFullYear();
var calculatedYear = currentYear - 123;
var oldage = age - calculatedYear;
if (age > currentYear) {
swal("Hov!", "Vi er ikke nået til det år endnu.", "error");
return false;
}
if (oldage < 5) {
swal("Hov!", "Du skal indtaste et gyldigt fødselsår.", "error");
return false;
}
if (isNaN(age) || age == 'F.eks. 1963') {
swal("Hov!", "Du skal indtaste dit fødselsår, for at få adgang til denne side.", "error");
return false; //stop the validation here
}
if (new Date().getFullYear() - age >= 18) {
Cookies.set("usermobile", "ok", {
expires: 1
});
$('#btn-close-modal').trigger('click');
} else {
Cookies.remove("usermobile");
location.href = 'noaccess.html';
}
});
</script>
<script>
document.getElementById('age_validation_input').addEventListener('keydown', function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (!([8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 ||
(key == 65 && (e.ctrlKey || e.metaKey)) ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) ||
(key >= 96 && key <= 105)
)) e.preventDefault();
});
</script>
<script src="js/jquery.min.js"></script>
<script src="js/animatedModal.min.js"></script>
<script>
//demo 03
$("#demo03").animatedModal({
modalTarget: 'modal-03',
animatedIn: 'bounceInDown',
animatedOut: 'bounceOutUp',
color: '#434138',
// Callbacks
beforeOpen: function() {
console.log("The animation was called");
},
afterOpen: function() {
console.log("The animation is completed");
},
beforeClose: function() {
console.log("The animation was called");
},
afterClose: function() {
console.log("The animation is completed");
}
});
</script>
<script type="text/javascript">
(function() {
var link = document.getElementById('demo03');
link.click();
})();
</script>
在使用JQuery库之前,您需要包含它。此外,如果您想按F12
打开控制台,那么应该会出现一个错误,告诉您该库丢失了。
这应该有效:
<div align="center">
<?php
if(!isset($_COOKIE["usermobile"])) { ?>
<ul>
<li><a id="demo03" href="#modal-03">DEMO03 7</a></li>
</ul>
<!--DEMO03-->
<div id="modal-03" style="background-image:url(images/access.jpg); background-size:cover;">
<!--"THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID-->
<div id="btn-close-modal" class="close-modal-03">
<!--CLOSE MODAL-->
</div>
<div class="modal-content">
<br /><br /><br /><br /><br /><br />
<img src="images/logo.png" />
<br /><br />
<font color="#bfbaa8">Man skal være over 18 år, for at få adgang til denne side.<br />
<font size="+4">Indtast dit fødselsår</font><br />
<input maxlength="4" id="age_validation_input" size="33" align="middle" style="background-color: rgba(191, 186, 168, 0.8); border:none; height:90px; width:380px; color:#3d3b33; padding:15px; font-size:70px; font-weight:bold;" value="F.eks. 1963" onblur="onBlur(this);" onfocus="onFocus(this);"></font>
<br />
<input type="button" id="age_validation_btn" align="middle" style="background-color: rgba(99, 95, 82, 0.8); border:none; height:65px; width:410px; color:#c4bda4; font-size:40px; font-weight:bold;" value="OK her" />
<br /><br />
<font size="-1" color="#69665b">Ved at klikke "OK" giver du tilladelse til, at webstedet benytter cookies.</font>
</div>
</div>
<?php } ?>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/animatedModal.min.js"></script>
<script>
$('#age_validation_btn').on('click', function() {
var age = parseInt($('#age_validation_input').val(), 10);
var currentYear = (new Date).getFullYear();
var calculatedYear = currentYear - 123;
var oldage = age - calculatedYear;
if(age > currentYear) {
swal("Hov!", "Vi er ikke nået til det år endnu.", "error");
return false;
}
if(oldage < 5) {
swal("Hov!", "Du skal indtaste et gyldigt fødselsår.", "error");
return false;
}
if(isNaN(age) || age == 'F.eks. 1963') {
swal("Hov!", "Du skal indtaste dit fødselsår, for at få adgang til denne side.", "error");
return false;//stop the validation here
}
if (new Date().getFullYear() - age >= 18) {
Cookies.set("usermobile", "ok", { expires: 1 });
$('#btn-close-modal').trigger('click');
} else {
Cookies.remove("usermobile");
location.href = 'noaccess.html';
}
});
</script>
<script>
document.getElementById('age_validation_input').addEventListener('keydown', function(e) {
var key = e.keyCode ? e.keyCode : e.which;
if (!( [8, 9, 13, 27, 46, 110, 190].indexOf(key) !== -1 ||
(key == 65 && ( e.ctrlKey || e.metaKey ) ) ||
(key >= 35 && key <= 40) ||
(key >= 48 && key <= 57 && !(e.shiftKey || e.altKey)) ||
(key >= 96 && key <= 105)
)) e.preventDefault();
});
</script>
<script>
//demo 03
$("#demo03").animatedModal({
modalTarget:'modal-03',
animatedIn:'bounceInDown',
animatedOut:'bounceOutUp',
color:'#434138',
// Callbacks
beforeOpen: function() {
console.log("The animation was called");
},
afterOpen: function() {
console.log("The animation is completed");
},
beforeClose: function() {
console.log("The animation was called");
},
afterClose: function() {
console.log("The animation is completed");
}
});
</script>
<script type="text/javascript">
(function() {
var link = document.getElementById('demo03');
link.click();
})();
</script>
在所有其他javascript代码之前加载jquery文件。否则,它将尝试在加载Jquery之前运行您的代码,并且会失败。
还要试着给自己设置一个文档准备功能,以确保它只在页面完全加载时运行,如下所示:
$(document).ready(function(){
// yourcode
}