前言

该内容是我在b站上看到的，我把各要点都做了说明，希望有所帮助

一效果

验证成功的效果

验证失败的效果

二代码

html

  <div class="v_code"><div class="code_show"><span class="code" id="checkCode">adf34y</span><a href="javascript:;" id="linkbt" onclick="getRound()">看不清换一张</a></div><div class="input_code"><label for="inputCode">验证码：</label><input type="text" id="inputCode"></div><input type="button" id="Button1" value="确定" onclick="goRight()"></div>

js

 //获取页面元素,待会替换内容需要trues = document.querySelector('#checkCode')
//页面加载触犯getRound（）方法，生成验证码window.onload = function () {getRound()}//生成验证码函数function getRound() {// 数组内容为验证码的字符var arr = ['a', 'v', 'e', 't', '9', '3', '2', '6', '5'];var str = '';//循环遍历6次for (var i = 0; i < 6; i++) {// 生成0~8之间的随机数var randomnum = Math.round(Math.random() * (8 - 0) + 0);//把随机数当作数组的索引，得到对应的值，存入str中str += arr[randomnum]}将生成的str的值，渲染到页面上trues.innerHTML = str}//验证码校对函数function goRight() {// 获取输入框表单元素var content = document.querySelector('#inputCode');//生成验证码与输入值进行对比if (content.value === trues.innerHTML) {alert('success')} else {content.value = ''alert("error")}}

三总结

知识点

1.遍历循环得到个数
2.通过索引找到数组的值
3.字符串拼接
4.页面渲染

鸡汤

那些看似不起波澜的日复一日，会在某天让你看到坚持的意义。

JavaScript之验证码--常用js特效相关推荐

JavaScript提示层漂浮js特效代码
下载地址一款实用的JavaScript提示层漂浮特效代码,警告.提示.成功等,可以设置位置.基础调用Notify({ title: "Toast Message" });内容可以 ...
JavaScript屏幕保护网页js特效代码
下载地址一个纯JavaScript库,使您能够在你的网站上设置屏幕保护程序.这个js插件可以检测到页面上的用户活动和空白的屏幕当用户已经闲置了一段时间. dd:
炫酷JavaScript转盘时钟动态js特效
下载地址一款炫酷JavaScript转盘时钟动态特效,该时钟跟随系统时间,设计并计算了每个时刻指针所走过的角度,效果真实逼真. dd:
常用js(javascript)函数
常用js(javascript)函数 1.常规函数 javascript常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮. (2)confirm函数:显示一个确认 ...
php js特效代码如何用,Javascript实现吸顶特效（代码示例）
本篇文章给大家带来的内容是Javascript实现吸顶特效(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 知识点 1.scroll家族和offset家族的结合运用 2. ...
常用js(javascript)函数(转)
1.常规函数 javascript 常规函数包括以下9个函数: (1)alert函数:显示一个警告对话框,包括一个OK按钮. (2)confirm函数:显示一个确认对话框,包括OK.Cancel按钮. ...
javascript 获取滚动条高度+常用js页面宽度与高度
javascript 获取滚动条高度+常用js页面宽度与高度/ ********************* 取窗口滚动条高度****************** / function getScrol ...
100多个基础常用JS函数和语法集合大全
网站特效离不开脚本,javascript是最常用的脚本语言,我们归纳一下常用的基础函数和语法: 1.输出语句:document.write(""); 2.JS中的注释为// 3.传 ...
web开发常用js及html代码（待整理）
css 创建CLASS并不是建立多种风格的唯一手段, ID也可以用来实现同一规则被应用到页面中不同的地方. 它的语法是: #id名 {标志属性:属性值:标志属性:属性值:--标志属性:属性值} 如上面 ...
web开发常用js及html代码
本文出自:http://tb.blog.csdn.net/TrackBack.aspx?PostId=710544 css 创建CLASS并不是建立多种风格的唯一手段, ID也可以用来实现同一规则被应 ...

JavaScript之验证码--常用js特效

文章目录

前言

一效果

二代码

html

js

三总结

知识点

鸡汤

JavaScript之验证码--常用js特效相关推荐

最新文章

热门文章

JavaScript之验证码--常用js特效

文章目录

前言

一 效果

二 代码

html

js

三 总结

知识点

鸡汤

JavaScript之验证码--常用js特效相关推荐

最新文章

热门文章

一效果

二代码

三总结