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实例练习题:模拟用户登录验证的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!