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

2021-11-04 23:02:20 阅读：168 来源： 互联网

标签：练习题 codes 登录 Dom 验证码 getElementById HTML var document

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属性是当值都当成纯文本处理

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

标签：练习题,codes,登录,Dom,验证码,getElementById,HTML,var,document
来源： https://blog.csdn.net/weixin_44107140/article/details/121153382

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

测试：

总结：

codes