博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
验证码
阅读量:5124 次
发布时间:2019-06-13

本文共 1062 字,大约阅读时间需要 3 分钟。

金讯教育有一节课讲的是验证码;代码如下:

html:

                   <
label>
                        <input type="text" />
                        <span id="yz" style=" background:url(1.png) -10px -15px;width:80px;font-style: italic; height: 20px;border: 1px solid black;display: inline-block;"></span>
                        <a href="javascript:;" id='btn'>看不清</a>
                    </label>
js:
         
    // 验证码 数字和字母组成6位 0-9 a-zA-Z
    /*
         "0" ------ 48 "9"------ 57 48-57
         "a"-------97 "z"------122 97-122
         "A"-------65 "Z"------90 65-90
            48-122
    */
    function yzm() {
        // 循环六次 每次产生一个随机的数字或字母
        var str = "";
        for (var i = 0; i < 6; i++) {
            var code = rand(48, 122); //这是封装好函数 function rand(min,max) {return Math.round(Math.random()*(max-min))+min;}取48~122随机数
            if (code >= 48 && code <= 57 || code >= 65 && code <= 90 || code >= 97 && code <= 122) {
                str += String.fromCharCode(code); // Unicode 编码转为一个字符:
                console.log(code)
            } else {
                i--;    // 如果条件不符例如弹出60就让 i--重新计算
            }
        }
        return str;
    }
    $("yz").innerHTML = yzm(); //也是封装好的函数获取id的DOM元素    
function $(id) {return document.getElementById(id);}
  
  $("btn").onclick = function () {
        $("yz").innerHTML = yzm();
    }
代码效果如图: 这样就出现了验证码的效果

 

转载于:https://www.cnblogs.com/zhx119/p/11183284.html

你可能感兴趣的文章
【网络流24题】No.7 试题库问题 (最大流,二分图多重匹配)
查看>>
一行代码为UITextField添加收键盘功能
查看>>
重启模块与及关开邮件存储设置功能页面-PHP-shell-py
查看>>
DNS协议详解
查看>>
[OJ] Matrix Zigzag Traversal
查看>>
2015-7.7森林探秘季
查看>>
千位分隔符的完整攻略
查看>>
PHP 递归删除目录中文件
查看>>
小甲鱼Python笔记(下)
查看>>
面试题19:二叉树镜像
查看>>
Android端实时音视频开发指南
查看>>
C++ 一键关闭屏幕
查看>>
关于生活
查看>>
基金基础知识
查看>>
loadrunner学习理论之一
查看>>
C++ 初始化列表初始化列表性能问题的简单的探索
查看>>
MyBatis入门
查看>>
曾国藩:诚敬静谨恒!
查看>>
ASP.NET数据格式的Format-- DataFormatString
查看>>
IOS+Android马甲包封装上架!
查看>>