首页 > 编程语言 >输入界面(html,javascript)可随机生成验证码

输入界面(html,javascript)可随机生成验证码

时间:2023-09-13 20:34:28浏览次数:50  
标签:canvas javascript ctx 验证码 captcha getElementById html var

<!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>

 

标签:canvas,javascript,ctx,验证码,captcha,getElementById,html,var
From: https://www.cnblogs.com/aixin52129211/p/17700656.html

相关文章

  • 无涯教程-JavaScript - ISFORMULA函数
    描述如果对包含公式的单元格的引用,则ISFORMULA函数返回逻辑值TRUE。否则返回FALSE。语法ISFORMULA(reference)争论Argument描述Required/OptionalreferenceReferencecanbeacellreference,aformula,oranamethatreferstoacell.RequiredNotes如果引......
  • 无涯教程-JavaScript - ISEVEN函数
    描述如果数字为偶数,则ISEVEN函数返回TRUE,如果数字为奇数,则返回FALSE。语法ISEVEN(number)争论Argument描述Required/OptionalNumber要测试的值。如果number不是整数,则将其截断。RequiredNotes如果数字为非数字,则ISEVEN返回#VALUE!错误值。您可以在执......
  • 无涯教程-JavaScript - ISERROR函数
    描述如果ISERROR函数引用的是Excel错误,则该函数将返回逻辑值TRUE。否则返回FALSE。语法ISERROR(value)争论Argument描述Required/OptionalvalueAnerrorRequiredNotes此函数在公式中用于测试计算输出很有用。与IF函数结合使用时,此函数提供了一种用于定位公式中......
  • 为什么要学习 JavaScript?
    出于多种原因,学习JavaScript非常有帮助,特别是如果您对Web开发或一般编程感兴趣的话。以下是学习JavaScript的一些有力论据:灵活性:JavaScript编程语言非常灵活,可用于前端和后端Web开发。它经常用于创建桌面应用程序(使用Electron等框架)以及移动应用程序(使用ReactNative)。W......
  • 无涯教程-JavaScript - ISERR函数
    描述如果ISERR函数引用的是Excel错误(#N/A错误除外),则ISERR函数返回逻辑值TRUE。否则返回FALSE。语法ISERR(value)争论Argument描述Required/OptionalvalueAnerrorRequiredNotes此函数在公式中用于测试计算输出很有用。与IF函数结合使用时,此函数提供了一种用于......
  • 无涯教程-JavaScript - INFO函数
    描述INFO函数返回有关当前操作环境的信息。语法INFO(type_text)争论Argument描述Required/OptionalType_text指定要返回的信息类型的文本。下表给出了Type_text的值和相应的返回信息。RequiredType_text返回的信息"目录"当前目录或文件夹的路径。"num......
  • 无涯教程-JavaScript - YIELDDISC函数
    描述YIELDDISC函数返回打折证券的年收益。语法YIELDDISC(settlement,maturity,pr,redemption,[basis])争论Argument描述Required/OptionalSettlement证券的结算日期。证券结算日期是指在发行日期之后将证券交易给买方的日期。RequiredMaturity证券的到期......
  • 无涯教程-JavaScript - YIELD函数
    描述YIELD函数返回定期付息的证券的收益率。使用YIELD计算债券收益率。语法YIELD(settlement,maturity,rate,pr,redemption,frequency,[basis])争论Argument描述Required/OptionalSettlement证券的结算日期。证券结算日期是指在发行日期之后将证券交易给买方......
  • web前端入门到实战:HTML5基础-新增标签+新增属性+布局案例
    html5中常用的结构标签article文章header头部nav导航section区域aside侧边栏hgroup区块的相关信息figure定义一组内容及标题figcaption定义figure元素的标题footer底部dialog对话框使用习惯:header/section/footer>aside/articl......
  • 百度中文点选验证码研究
    之前百度都是只有旋转验证码,最近总是出现中文点选验证码。而且中文数量比较多,大图中有固定的7个中文字符需要识别。我首先想到使用通用的中文识别,当时我尝试了很多出名的中文识别但是效果都非常差,基本上全错,完全是不可用的状态。没有办法,只有自己来训练识别模型了。由于中文种类非......