给网站加一个算术验证表单,验证通过才能继续操作。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/'); // 调用跳转函数
当然,最后的逻辑可以自行修改。