实现简单登录框

最新推荐文章于 2023-05-16 14:33:54 发布

达达学前端

最新推荐文章于 2023-05-16 14:33:54 发布

阅读量157

点赞数

分类专栏： js 文章标签： css html js

本文链接：https://blog.csdn.net/m0_55965566/article/details/120968726

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!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>登录</title>
    <link rel="stylesheet" href="css/demo00.css" />
</head>
<body>
    <!-- 
        当鼠标移入记住密码时，下面的提示文字显示，鼠标移开时，提示文字隐藏
     -->
    <form class="form">
        <p><img src="img/h1.webp"  class="head"/></p>
        <p>
            <img src="img/use.png" class="icon"/>
            <input type="text" placeholder="输入账号" id="use" class="texts"/>
        </p>
        <p>
            <img src="img/pwd.png" class="icon"/>
            <input type="password" placeholder="输入密码" id="pwd" class="texts"/>
        </p>
        <p>
            <input type="checkbox" /><span class="txt1" id="txt1">记住密码?</span><br />
            <span class="txt2" id="txt2">为了防止信息泄露,请慎重勾选该选项！</span>
        </p>
        <p>
            <button id="btn1" class="btn">登录</button>
            <button id="btn2" class="btn">取消</button>
        </p>
    </form>
    <script src="js/demo00.js"></script>
</body>
</html>

// 获取需要的元素
var oTxt1 = document.getElementById("txt1");  //获取记住密码的文本信息
var oTxt2 = document.getElementById("txt2");  //获取记住密码的提示文字信息

// 给记住密码添加鼠标移入移出事件
oTxt1.onmouseover = function (){  //onmouseover鼠标移入事件
    // 当鼠标移入记住密码时提示信息显示
    oTxt2.style.display = "block";
}

oTxt1.onmouseout = function (){  //onmouseout鼠标移出事件
    // 当鼠标移开记住密码时提示信息隐藏
    oTxt2.style.display = "none";
}
//包含知识点的模块:DOM,变量,函数,事件对象

达达学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
实现简单登录框

<!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>...
复制链接

扫一扫