javascript之DOM四位的验证码简单实现

最新推荐文章于 2024-08-15 14:47:41 发布
最新推荐文章于 2024-08-15 14:47:41 发布
阅读量146 收藏
点赞数
文章标签： java javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/loaderman/p/10006201.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
    
    
    //产生一个四位的验证码。
    function createCode(){
        var datas = ['A','B','何','敏','凡','江','1','9']; // 0-7  长度8
        var code = "";
        for(var i = 0 ; i<4; i++){
            //随机产生四个索引值
            var index =  Math.floor(Math.random()*datas.length); // random 0.0-1.0（不包括1.0）
            code+=datas[index];
        }    
        
        var spanNode = document.getElementById("code");
        spanNode.innerHTML = code;
        spanNode.style.fontSize ="24px";
        spanNode.style.color = "red";
        spanNode.style.backgroundColor="gray";
        spanNode.style.textDecoration = "line-through";
    }
    
function ready(){
    createCode();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body onload="ready()">
    <span id="code"></span><a href="#" onclick="createCode()">看不清，换一个</a>
    
</body>
</html>

 

转载于:https://www.cnblogs.com/loaderman/p/10006201.html

weixin_30483495
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS随机生成验证码
weixin_44858732的博客
06-28 520
JS随机生成验证码 下面我们使用Visual Studio这个软件来写一个JS的代码，我们可以用JS的代码写一个简单的方法，就是实现一个JS的随机生成验证码的功能。 那么这个代码要怎么写呢，首先我们需要先在界面上写一下的Html的代码，我们来看一下界面的代码是什么，看以下截图： 在截图中我们可以看到界面的代码就是，先用一个button标签，然后给他一个id为验证码。接着给他一些属性的效果，给这个...
JS生成4位验证码
代码存档
02-18 646
PHP &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;     &lt;/head&gt;     &lt;body&gt;         &lt;?
JavaScript生成验证码并实现验证功能
10-21
主要介绍了JavaScript生成验证码并实现验证功能的相关资料,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
javascript生成随机四位数
u010227042的博客
03-14 6076
在网页编程中，经常会用到随机数，像生成订单号这些都会用到。 今天小编分享的是使用javascript生成随机四位数，以下为实例代码。 <input type="button" id="btn" value="点击生成随机四位数" /> <span id="num"></span> <script> function rand(min,max) { return Math.floor(Math.rando
dom语句中验证码倒计时案例的小细节
langziangTom的博客
10-28 170
dom语句中验证码倒计时案例的小细节
js随机生成随机数（验证码）
AnniceCui的博客
09-24 3280
1.我们要先创建一个数组 里面包含写大小写字母还有数字 let codeArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', ...
4位随机简单验证码的JS实现
热门推荐
min_0329的博客
01-29 1万+
验证码是用来区分人和计算机的，通常通过模糊字符、拼图等形式达到让人能看懂且计算机无法识别的效果。我们采用验证码是为了防止机器不断登录的现象，比如现实生活中的刷票、刷帖、灌水等。在本篇用JS实现4位简单网页验证码，当然这是最基础的验证码，安全性比较低。 以下是HTML的代码： 验证码： 看不清楚，换一张 给呈现验证码的文本框添加 disabl
JavaScript登录验证码的实现
10-21
总结来说，JavaScript实现登录验证码功能涉及到了前端编程基础、随机数生成、DOM操作以及事件处理等方面的知识。通过结合HTML和JavaScript，可以创建出能够有效提升网站安全性的验证码功能。同时，也要注意随着技术...
js生成四位验证码并验证
08-31
生成四位验证码的核心在于使用JavaScript生成随机数，并将这些随机数拼接成一个字符串。此功能主要由`createCode()`函数完成。 **具体步骤：** - 定义一个数组`random`，包含0到9的所有数字。 - 使用`for`循环生成...
jQuery实现验证码功能
10-20
首先定义了一个包含数字、小写字母、大写字母的数组，然后通过随机选择数组中的元素拼接成四位字符串作为验证码。拼接完成后，将生成的验证码显示在按钮上，同时在按钮上设置了点击事件，点击按钮时重新生成验证码。...
JavaScript实现PC端四格密码输入框功能
11-21
HTML（HyperText Markup Language）是构建网页的基础，这里创建了四个`<input>`标签，类型为`password`，分别用于输入四位密码。每个输入框的`maxlength`属性被设置为1，限制用户只能输入一个字符。`<style>`部分...
设计一个发送验证码的案例【DOM】
egg_er的博客
12-04 657
设计发送验证码案例 DOM部分学习以后，设计一个发送验证码，老样子，先分析，再写代码… 案例分析： 首先搭建好结构，一个输入框一个按钮，按钮上给个值为点击发送验证码 点击以后禁用按钮 点击按钮，按钮上的内容变成，倒计时锁多少秒 设置一个定时器，每隔一秒执行一次，让倒计时减一 判断验证当前倒计时是否已经小于0，如果小于0，那么清除定时器，并且给定时器设置初始内容以及倒计时的初始时间，并且把禁用的按钮给调回来,用：btn.disabled = flase;来实现 如果当前倒计时大于0，那么让时间不断减一即可
用JS生成随机验证码（超简单代码）
babybabyyu的博客
07-29 6114
下面我们来用DOM操作写出一个随机的验证码 当前页面会显示一个区域和一个生成验证码的按钮 每次点击按钮时会随机产生四位验证码。最终效果如下： HTML基本结构如下： <div id="code"></div> <button onclick="creatCode()">验证码</button> CSS样式如下： #code{ width: 110px; height: 50px; background-color: #649
JS实现随机验证码
weixin_41105030的博客
01-08 1585
验证码 验证码有很多种类，有图片，字符串，短信…首先，我们一般不能使用JS来实现验证，要不用户可以直接禁用JS，跳过验证，而且客户端实现的都是不安全的。这里我们使用JS来模拟验证码。 生成一个随机四位数的验证码 需求：随机生成一个包含字母或数字的四位数验证码 思路 思路一 我们可以定义一个包含所有数字和字母的字符串str 获取它的长度str.length 在[0,str.length-1]的区...
JavaScript 小案例 随机五位数验证码
小羽向前跑
01-27 1377
功能展示： 点击按钮，随机生成数字+大小写字母验证码 所有代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;随机生成验证码&lt;/title&gt; &lt;/head&gt; &lt;style&gt; /*验证码*
dom事件操作例题，电子时钟，验证码，随机事件
weixin_34126557的博客
06-29 125
dom事件操作 当事件发生时，可以执行js 例子： 当用户点击时，会改变<h1>的内容： <h1 onClick="this.innerHTML='文本更换'">点击文本!</h1>　　 HTML事件例如： onclick=""//点击时 onload=""//页面加载完成时 onchage=""//改变时 onmouseover...
【知了堂学习笔记】_JavaScript之DOM操作案例（验证码）
TANGLHUI的博客
12-08 437
请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php刚刚学习了JS操作DOM，做了一个小小小小案例_验证码。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="te
javascript之DOM编程改变CSS样式（简易验证码显示）
态度决定高度A=X+Y+Z
05-24 1609
//产生一个四位的验证码。 function createCode(){ var datas = ['A','B','何','敏','凡','江','1','9']; // 0-7 长度8 var code = ""; for(var i = 0 ; i<4; i++){ //随机产生四个索引值 var index = Math.floor(Math.random()
JAVA进阶补充
最新发布
2301_80150315的博客
08-15 907
概念：把已经有的方法拿过来用，当作函数式接口中抽象方法的方法体条件：引用处必须是函数式接口被引用的方法需要已经存在被引用方法的形参和返回值需要跟抽象方法的形参和返回值保持一致被引用方法的功能需要满足当前需求：方法引用符意义：就是为让控制台的报错信息更加的见名知意自定义异常的步骤：定义异常类写继承关系空参构造带参构造​file对象就表示一个路径，可以是文件的路径、也可以是文件夹的路径；这个路径可以是存在的，也允许是不存在的构造方法描述根据文件路径创建对象。
DOMScripting：JavaScript与DOM网页设计实战
"JavaScript+DOM+编程艺术.pdf" 这本书——《JavaScript+DOM编程艺术》由Jeremy Keith撰写，前言由Dave Shea所作，旨在教授读者如何使用JavaScript与DOM（文档对象模型）进行web设计，尤其对学习AJAX异步调用具有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值