给网站加一个算术验证表单,验证通过才能继续操作。JS版本的,所以前端可以直接看到密码,你可以加密js代码或AJAX前后端分离的判断方法,来隐藏掉判断逻辑和密码,此代码只供前端示例。
HTML表单代码
<form id="verification-form"> <label id="question-label" class="question-label" for="answer">请回答下面的算术题:</label> <input type="text" id="answer" required> <br> <button type="submit">提交</button> </form>
JS验证判断代码
<script>
var question = null; // 存储当前题目
// 生成加减法算术题
function generateQuestion() {
var num1 = Math.floor(Math.random() * 10) + 1;
var num2 = Math.floor(Math.random() * 10) + 1;
var operator = Math.random() < 0.5 ? '+' : '-';
var questionText = num1 + operator + num2;
var answer = operator === '+' ? num1 + num2 : num1 - num2;
return {
question: questionText,
answer: answer
};
}
// 显示题目
function displayQuestion() {
question = generateQuestion();
var questionLabel = document.getElementById('question-label');
questionLabel.textContent = '请回答下面的算术题:' + question.question;
}
// 验证算术题答案
function verifyAnswer(event) {
event.preventDefault();
var userAnswer = parseInt(document.getElementById('answer').value, 10);
if (userAnswer === question.answer) {
alert('验证通过!');
redirect('https://www.wdzzz.com/'); // 调用跳转函数
} else {
alert('验证失败,请重新回答!');
}
document.getElementById('verification-form').reset();
displayQuestion();
}
// 页面跳转函数
function redirect(url) {
window.location.href = url;
}
// 初始化页面,显示第一个题目
displayQuestion();
// 监听表单提交事件
document.getElementById('verification-form').addEventListener('submit', verifyAnswer);
</script>代码释义
JS代码会在ID为question-label的标签内会生成一道算术题,如:请回答下面的算术题:5-3,算数结果填在ID为answer的input内进行判断,正确就执行
alert('验证通过!');
redirect('https://www.wdzzz.com/'); // 调用跳转函数当然,最后的逻辑可以自行修改。
