我有这个小形式,你应该输入你的出生年份。在那之后你应该按下一个按钮,它会在你的出生年份自动发现你是否超过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>
答案 0 :(得分:0)
在您的所有其他JavaScript代码之前加载您的jquery文件。否则它会在加载Jquery之前尝试运行你的代码,它会失败。
还尝试将自己的文档就绪功能确保它只在页面完全加载时才会运行:
$(document).ready(function(){
// yourcode
}
答案 1 :(得分:0)
在使用之前,您需要包含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>