js案例

登录的练习

点击事件和键盘事件

获取输入框的内容，判断用户名和密码是否正确

不管有没有登录成功，都会将输入框里面的内容清空

回车和点击登录都能实现登录

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <style>
        /* 全局样式，让页面整体居中 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft Yahei", sans-serif;
        }

        body {
            /* 页面背景色 */
            background-color: #f0f5ff;
            min-height: 100vh;
            /* 让容器垂直+水平居中 */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 登录外层容器 */
        .wrapper {
            width: 380px;
            padding: 40px 30px;
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        /* 输入框组 */
        .input-group {
            display: flex;
            align-items: center;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            margin-bottom: 20px;
            overflow: hidden;
        }

        .input-group span {
            width: 80px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            background-color: #409eff;
            color: #fff;
            font-size: 14px;
        }

        .input-group input {
            flex: 1;
            height: 45px;
            padding: 0 15px;
            border: none;
            outline: none;
            font-size: 14px;
            color: #333;
        }

        /* 登录按钮 */
        button {
            width: 100%;
            height: 45px;
            border: none;
            border-radius: 6px;
            background-color: #409eff;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2979cb;
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="wrapper">
            <div class="input-group">
                <span>用户名</span>
                <input type="text" placeholder="请输入用户名" class="username">
            </div>
            <div class="input-group">
                <span>密码</span>
                <input type="password" placeholder="请输入密码" class="password">
            </div>
            <button>点击登录</button>
        </div>
    </div>

    <script>
        // 获取dom
        // 点击事件
        // 去判断输入的值是什么，是否一样，条件判断

        // 获取2个输入框和按钮的对象
        let username = document.querySelector(".username")
        let password = document.querySelector(".password")
        let btn = document.querySelector("button")

        // 事件的三要素，事件源，事件类型，事件的处理程序
        // 事件源是按钮

        // 登录函数,因为登录的逻辑是一样的

        let login = () => {
            if (username.value == "joe" && password.value == "123") {
                alert("登录成功")
            }
            else if (username.value == "" || password.value == "") {
                alert("账号或者密码不能为空")
            }
            else {
                alert("登录失败")
            }
            // 登录后，需要清空内容
            username.value = ""
            password.value = ""
        }

        btn.addEventListener("click", () => {
            // 判断是否登录成功
            login()
        })

        password.addEventListener("keydown", (e) => {
            // 键盘事件
            if (e.key === "Enter") {
                login()
            }
        })
    </script>
</body>

</html>

img

功德无量的练习

点击同一个按钮，让定时器停止和启动，用一个变量来控制

对这个文本内容自增1，使用定时器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box1_01">
        <img src="" alt="未加载">
        <div class="google">
            功德：
            <span>0</span>
        </div>
        <button class="btn">点击开始为自己增加功德</button>
    </div>

    <script>
        // 获取dom
        // 点击事件
        // 获取标签里面的文本
        // 定时器
        let span = document.querySelector("span")
        let btn = document.querySelector(".btn")
        // 定时器为空，添加一个定时器，控制定时器开启还是停止
        let flag = null

        btn.addEventListener("click", () => {
            // 为空添加定时器
            if (flag == null) {
                flag = setInterval(() => {
                    span.innerHTML++
                }, 1000);
                // 点击之后，修改文本内容
                btn.innerHTML = "休息一下吧"
            }
            else {
                // 定时器不为空，删除定时器
                clearInterval(flag)
                // 并重新赋值定时器为null
                flag = null
                btn.innerHTML = "点击开始为自己增加功德"
            }

            // 原理：第一次点击为空，定时器开始，此时定时器不为空
            // 再次点击的时候，定时器不为空，执行删除定时器
            // 并赋值定时器为空
            // 下次点击的时候，就启动了定时器
        })
    </script>
</body>

</html>
posted @ 2026-05-29 15:01  乔的港口  阅读(43)  评论(0)    收藏  举报