输入界面（html,javascript）可随机生成验证码 

<!DOCTYPE html>  
<html>  
<body>  
    <h2>登录界面</h2>  
    <!-- form表示表单 -->
    <form id="loginForm">  
        <label for="username">用户名:</label><br>  
        <input type="text" id="username" name="username"><br>  
        <label for="password">密码:</label><br>  
        <input type="password" id="password" name="password"><br>  
        <label for="captcha">验证码:</label><br>  
        <input type="text" id="captcha_input" name="captcha"><br> 
        <canvas id="captcha" width="100" height="50"></canvas><br>  <!-- canvas表示图 -->
        <input type="button" value="提交" onclick="submitForm()">  
    </form>  
</body>  
<script>
    window.onload = function() {  
    generateCaptcha();  /* 方便用于再网页加载完毕后立刻执行的操作 */
};  
  
function generateCaptcha() {  
    /* 36表示36进制的包含字符0-9，a-z 
       10进制0-9 16进制0-9，a-f
      substring(2,8) 标志从第2个字符开始到第7个字符结束，就是6为随机生成码
    */
    var captcha = Math.random().toString(36).substring(2, 8); // 生成一个随机验证码  
    var canvas = document.getElementById('captcha');  //可以获取'captcha'元素改变其内容
    var ctx = canvas.getContext('2d');  //getContext()方法可返回一个用于在画布上绘图的环境
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前的验证码  '2d'表示二维
    ctx.font = '30px Arial';  //font可以设置字体样式

    //fillText()方法用于在画布上绘制填充的文本，文本默认为黑色context.fillText(text,x,y,maxWith) 
    //text指要写入的文本，x：此参数从何处开始文本的x坐标，y：此参数从何处结束文本的y坐标
    ctx.fillText(captcha, 10, 35); // 在canvas上画出新的验证码  
    sessionStorage.setItem('captcha', captcha); // 将验证码存储在sessionStorage中，以便后续验证  
}  
  
function submitForm() {  
    var username = document.getElementById('username').value;  
    var password = document.getElementById('password').value;  
    var captchaInput = document.getElementById('captcha_input').value;  
    var captcha = sessionStorage.getItem('captcha');  
    if (captchaInput === captcha) { // 如果输入的验证码和实际的验证码匹配  
        alert('登录成功！用户名：' + username);  
    } else {  
        alert('验证码错误！请重新输入。');  
        generateCaptcha(); // 如果验证码错误，重新生成一个新的验证码  
    }  
}
</script>
</html>

 

posted @ 2023-09-13 20:25  艾鑫4646  阅读(333)  评论(0)    收藏  举报