js案例——实现验证码功能

最新推荐文章于 2024-08-19 09:29:46 发布

ICY___

最新推荐文章于 2024-08-19 09:29:46 发布

阅读量1.4k

点赞数 3

分类专栏： ICY___的前端入门文章标签： js js案例验证码

本文链接：https://blog.csdn.net/ICY___/article/details/86517691

版权

本文介绍了如何运用JavaScript基本语法创建网页验证码功能，包括生成随机数字、字符和汉字，设置随机字体大小、旋转角度和颜色，并禁止复制粘贴，以及通过弹窗显示验证结果。

摘要由CSDN通过智能技术生成

今天的内容是用js的基本语法实现网页中常见的验证码功能。

大体思想：核心语法为math中随机数的使用利用随机数字来实现随机的数字字符汉字，利用字符串的拼接来实现随机字体大小、旋转角度和各种颜色，利用css样式来禁止从网页上复制和粘贴，最后用弹窗来实现验证结果提示。

实现结果：

具体代码及注释：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>验证码</title>
    <style>
        /* body{
        margin: 0%;
        padding: 0%;
    } */
    /* html,body{
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;} */
/* 分别是谷歌，火狐，IE浏览器的对应禁止选中 */
/* 通过css样式来实现禁止复制验证码  建议使用*/
    .block{
        width: 100px;
        height: 40px;
        border: 1px solid grey;
        float: left;
        background-image: url(img/1.png);
        background-size: 100%;
        overflow: hidden;
    }
    #look{
        float: left;
        color: black