HTML Dom结合js实例练习题：模拟用户登录验证

最新推荐文章于 2022-11-20 19:46:58 发布

程序员-小李

最新推荐文章于 2022-11-20 19:46:58 发布

阅读量894

点赞数 3

分类专栏：前端文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_44107140/article/details/121153382

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

HTML Dom结合js实例练习题：模拟用户登录验证

在登录界面可以实现用户名，密码，验证码输入，点击登录按钮可以判断用户输入是否正确从而判断是否登录成功

参考程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
</head>
<body>
    <div style="text-align: center;">
        <h4 >登录</h4>
        <hr>
        <p>账号: <input type="text" id="account" placeholder="请输入账号..."> </p>
        <p>密码: <input type="text" id="password" placeholder="请输入密码..."> </p>
        <p>
            验证码: <input type="text" id="code" style="width: 2cm;margin-right: 0.5cm;"> <span id="code1">3452</span>
            <span>
                <button id="btn" onclick="code()">刷新验证码</button>
            </span>
        </p>
        <button id="login" onclick="login()">登录</button>
    </div>
</body>
<script>
    var codes="";
    var str="1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
    function code(){
        codes="";
        for(let i=0;i<4;i++){
            // 随机下标
            var index=parseInt((Math.random())*str.length);
            // 生成4位验证码
            codes+=str[index];
        };
        // 将验证码赋值
        document.getElementById("code1").innerText=codes;
    }
    // 登录
    function login(){
        //账号：admin,密码；admin
        // 获取用户输入的账号，密码，验证码
        var account=document.getElementById("account");
        var password=document.getElementById("password");
        var code=document.getElementById("code");
        // 判断正确与否
        if(account.value=="admin"&&password.value=="admin"&&code.value==codes){
            alert("登录成功！")
        }else{
            alert("输入有误，请检查！")
        }}
    
</script>
</html>

测试：

点击刷新验证码按钮，可以刷新验证的显示值，当账号,密码，验证码都输入正确，才会登录成功！

当输入信息有误，会有错误提示

总结：

上面的程序中用到的知识点：

随机数生成：

生成0-1范围内的数(包含0，不包含1）：Math.random()

生成一定范围的随机数： Math.random()*(你要随机数的最大值)+随机数的起始值

比如：要生成1-10以内的随机数，可以这样写：Math.random()*10+1

常用dom对象的方法

方法	描述
getElementById()	返回带有指定ID的元素
getElementsByTagName()	返回包含带有指定标签名称的所有元素的节点列表
getElementsByClassName()	返回包含带有指定类名的所有元素的节点列表

innerHTML属性:往指定对象设置显示文本属性，可以显示样式

如：document.getElementById(“code1”).innerText=codes;

当上面的codes写成
codes
时，其样式也会渲染到界面
innerText属性是当值都当成纯文本处理

更多详细的内容可以查阅相关的文档资料哦，本次分享到这里，下一篇见！！

程序员-小李

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML Dom结合js实例练习题：模拟用户登录验证

HTML Dom结合js实例练习题：模拟用户登录验证在登录界面可以实现用户名，密码，验证码输入，点击登录按钮可以判断用户输入是否正确从而判断是否登录成功参考程序：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
复制链接

扫一扫