Javascript

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

本文主要是介绍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="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>

测试：

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

copy.png

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

copy.png

总结：

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

  1. 随机数生成：

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

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

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

  2. 常用dom对象的方法

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

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

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

    当上面的codes写成

    codes

    时，其样式也会渲染到界面

  4. innerText属性是当值都当成纯文本处理

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

这篇关于HTML Dom结合js实例练习题：模拟用户登录验证的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航