生成验证码的JS代码怎么写

JS生成验证码这个问题现在很好解决,可是当初上学的时候很难解决,今天特意写下这篇,希望对大学党有所帮助。

操作方法

  • 01

    打开网页编辑器编写div+css代码,先把界面做好,然后再做功能,代码如下所示: <form name="form1"> 请输入要产生的验证码的位数:<input type="text" name="digit" id="digit"> <br><br> <input type="button" value="生成" onClick="deal()"> &nbsp<input type="button" value="刷新" onClick="qc()"> <br><br> <div id="result"></div> </form>

  • 02

    写好之后,我们写CSS代码,然后再调试一下,争取在前台显示的美观一些。CSS代码如下所示: <style> body{background:#ccc;  } form{margin-left:20%; margin-top:10%; } </style>

  • 03

    弄好之后用浏览器打开,界面如下图所示:

  • 04

    弄好前端界面之后,我们就需要写JS了,步骤主要如下所示,首先我们先定义一个参数,这个参数是我们输入文本框的数字,生成随机数用到了random方法,先看第一个方法,第一个方法我们用for循环来显示出随机数的个数。代码如下所示: function cg(digit) { var result=""; for(i=0;i<parseInt(digit);i++) { result=result+(parseInt(Math.random()*10)).toString(); } return  result; }

  • 05

    第一个函数写好后我们来看第二个,第二个函数是输出生成的验证码,代码很少:如下所示(含删除代码) function deal() { result.innerHTML="产生的验证码是:"+cg(form1.digit.value); } function qc() { form1.digit.value=""; }

  • 06

    写好之后,我们验证一下,我在文本框内输入5,结果输出了5个数字,结果显示没有错误。

  • 07

    当然这么写也是有BUG的,例如输入0、负数、或者小于1的小数都不会生成验证码。如果大家有兴趣,可以修改这些BUG。

(0)

相关推荐

  • Notepad++插件JSTool:JS代码格式化工具

    Notepad++插件JSTool:JS代码格式化工具 我们在写Js的时候,经常需要格式化Js代码,这个时候就可以试下这款插件:JsToolNpp(以前也叫:JsMin),针对Js文件格式化效果很好, ...

  • Notepad++插件JSTool:JS代码格式化工具是什么?

    我们在写Js的时候,经常需要格式化Js代码,这个时候就可以试下这款插件:JsToolNpp(以前也叫:JsMin),针对Js文件格式化效果很好,强烈推荐. 下载插件 插件 > Plugin Ma ...

  • Notepad++插件JSTool:JS代码格式化工具

    我在做开发的时候经常会用到Noepad++,这个编辑器使用比较方便,启动速度够快,轻便,功能也强大,还有插件也蛮多. 我们在写Js的时候,经常需要格式化Js代码,这个时候就可以试下这款插件:JsToo ...

  • 如何注释html、css、js代码

    不是每行代号都需要注释,但注释代码量要占10% ~ 20%,以免其他人在检测调试代码的时候,不知道这段代码是什么意思,还得从前面开始理解代码,增加别人的工作量.下面,我们来看看如何注释html.css ...

  • 如何在html中调用js代码

    我们编写html的时候经常需要调用JS的相关代码,那么如何在HTML中调用JS的代码呢?下面小编给大家分享一下. 操作方法 01 首先打开Sublime text软件编写一个html页面,如下图所示 ...

  • 使用kaptcha生成验证码

    kaptcha是一个简单好用的验证码生成工具,通过配置,可以自己定义验证码大小.颜色.显示的字符等等.下面就来讲一下如何使用kaptcha生成验证码以及在服务器端取出验证码进行校验. 操作方法 01 ...

  • IE浏览器不能运行js JS代码失效不能运行了如何解决

    IE不能运行js,在IE浏览器js代码失效,js不能运行了怎么办,一些网站里面的js特效不能使用了,一些效果都没法显示出来。 如果你的IE不能打开js脚本(连系统里所有的js文件都不运行,网页上的js ...

  • 禁止IE用右键的JS代码是什么

    这篇文章主要介绍了禁止IE用右键的JS代码,有需要的朋友可以参考一下 [url=]复制代码[/url]代码如下: <!--禁止网页右键: --> document.body.onconte ...

  • 用原生的js代码实现图片轮播

    初学前端开发的小朋友们可能还不会用原生的js代码实现图片的轮播.在面试的时候,有的面试官可能会让你用原生的js代码实现图片的轮播.好,今天,我就给大家准备一些干货,让新手快速掌握图片的轮播. 操作方法 ...