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

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

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了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

相关文章

  • Photoshop制作针织毛绒文字效果
  • PHP实现腾讯短网址生成api接口实例
  • Photoshop给武器添加绿色光线效果
  • wordpress错误提示”抱歉,由于安全原因,这个文件类型不受支持。”解决方法
  • 如何使用微信获取openid的静默及非静默
  • 解析如何进行Laravel表单验证分层设计和验证场景应用
  • 通过实例来了解Laravel中管道的使用方法
  • CentOS7挂载新的数据盘
  • 服务器硬盘空间不足导致MySQL异常的一系列问题及解决办法
  • DEDECMS获取本文地址标签

文章分类

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

最近更新的内容

    • 详解mysql double master的配置方法
    • 网站快照停滞不前的N种影响因素
    • 实现php页面自动跳转的方法有哪些
    • 微信小程序中如何实现子向父传参(页面通信)
    • Photoshop设计大气时尚的金色花纹教程
    • ThinkPHP5框架中Redis是如何使用和封装?
    • 如何区分PHP中intval()与(int)
    • js中!与!!的用法介绍
    • PHPCMS V9后台复制指定文章到同模型的指定栏目中
    • 介绍Mysql位运算简化一对多关系

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

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