• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > Javascript怎么实现四位随机验证码

Javascript怎么实现四位随机验证码

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了Javascript,随机验证码等相关知识,希望对您有所帮助

javascript实现四位随机验证码的方法:首先通过“function random(max,min){...}”创建随机数;然后通过“function code(){...}”创建随机四位验证码;最后调用验证码函数即可。


Javascript怎么实现四位随机验证码


javascript怎么实现四位随机验证码?

JS实现4位随机验证码

通过随机数编写一个不分大小写且含数字的4位随机数。

CSS样式

p{    width: 60px;    height: 20px;    display: inline-block;    letter-spacing: 3px;    border: 1px solid red;}#p{    height: 20px;    margin-bottom: 10px;}#btn,p:hover{    cursor: default;}button{    display: block;}

主体部分

<p id="box">    验证码    <input type="text" id="int" />    <p id="p"></p>    <p id="p"></p>    <button id="btn">提交</button></p>

JS部分

//随机数function random(max,min){    return Math.round(Math.random()*(max-min)+min);}//随机4位验证码function code(){    //将数字、小写字母及大写字母输入    var str="1234567890qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM";    //给一个空字符串    var res='';    //循环4次,得到4个字符    for(var i=0;i<4;i++){        //将得到的结果给字符串,调用随机函数,0最小数,62表示数字加字母的总数        res+=str[random(0,62)];    }    p.innerHTML=res;}code(); //调用验证码函数p.onclick=code; //点击也可以刷新验证码//验证验证码btn.onclick=function(){    var int=document.getElementById("int").value;//获取用户输入的值    var p=document.getElementById("p").innerText;//获取验证码    //判断用户输入与验证码的大写一致(不分大小写)    if(int.toUpperCase()==p.toUpperCase()){        p.innerHTML="验证码正确";    }else{        p.innerHTML="验证码错误";    }}


实现结果


Javascript怎么实现四位随机验证码

总结

Math.round():四舍五入

Math.random():随机数

toUpperCase():将字符串转为大写



分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 一起来聊聊JavaScript函数柯里化
  • 在javascript中,NaN是什么类型?
  • javascript调试之console.table()
  • Javascript中常见的内置对象有哪些
  • Javascript怎么实现字符串替换星号
  • 解决JavaScript中数组排序sort不发生改变
  • Javascript怎么实现红绿灯
  • 两行 Javascript 代码生成 UUID的方法
  • Javascript怎么实现四位随机验证码
  • javascript怎么判断是否为null

相关文章

  • 2022-04-29Photoshop巧用滤镜制作简单的冰晶字效果
  • 2022-04-29用PHP实现的服务端socket具体实例
  • 2022-04-29WordPress自动设置标签Tag自动内链无插件实现方法
  • 2022-04-29PHP怎么实现评论回复功能
  • 2022-04-29分享一个Laravel建议写法指南
  • 2022-04-29vue.js怎么实现验证码
  • 2022-04-29一个设计师的PS经验技巧及设计心得
  • 2022-04-29宝塔面板忘记账号和密码怎么办?一条命令全搞定
  • 2022-04-29详解mysql double master的配置方法
  • 2022-04-29WordPress隐藏部分内容,评论后可见

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • PHP生成中间带LOGO图像的二维码
    • jQuery对象怎么转为html dom对象
    • PS制作炫彩新年快乐艺术文字效果的教程
    • 织梦dedecms网站六大SEO优化技巧分享
    • 帝国CMS二次开发会员登陆赠送积分
    • php如何修改上传图片大小
    • 让dedecms友情链接也支持limit
    • photoshop制作蟒蛇皮纹字效果
    • Dedecms怎么实现键盘翻页的功能
    • 常用的前端JavaScript方法封装

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有