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>
测试:
点击刷新验证码按钮,可以刷新验证的显示值,当账号,密码,验证码都输入正确,才会登录成功!
当输入信息有误,会有错误提示
总结:
上面的程序中用到的知识点:
-
随机数生成:
生成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