【JavaScript】注册表单案例返回顶部案例

文章目录

注册表单案例
返回顶部案例

注册表单案例

制作一个包含基本用户交互和数据验证的用户注册表单示例。

表单元素:

用户名：一个文本输入框，用于输入用户名。
密码：一个密码输入框，用于输入密码。
性别：两个单选按钮，分别代表男性和女性。
爱好：三个复选框，分别代表唱歌、跳舞和说唱（rap）。
国籍：一个下拉选择框，包含三个选项：中国、美国和英国。
备注：一个多行文本输入区域，用户可以输入额外的信息。

JavaScript功能:

实时验证：当用户名或密码发生变化时，会检查其长度是否符合要求（用户名至少3个字符，密码至少6个字符），并在旁边显示相应的错误提示。
表单提交验证：在提交表单前进行简单验证，确保用户名和密码不为空。如果未通过验证，则阻止表单提交并弹出警告。
显示信息：成功验证后，将用户填写的所有信息以格式化的方式显示在一个指定的<div>中。
设置默认值：点击“表单赋值”按钮后，会自动填充表单中的某些字段为预设值。
清空显示信息：点击“重置表单”按钮不仅会清除表单数据，还会清空显示信息区域的内容。

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

<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
    <style>
        span {color: red;font-size: 12px;}
        #displayInfo {width: 360px;height: 170px;border: 1px solid #000;}
    </style>
</head>
<body>
    <h2>注册表单</h2>
    <form name="regForm" onsubmit="validateAndDisplay(event)">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username">
        <span></span>
        <br><br>

        <label for="password">密码:</label>
        <input type="password" id="password" name="password">
        <span></span>
        <br><br>

        <label>性别:</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br><br>

        <label>爱好:</label>
        <input type="checkbox" id="singing" name="singing" value="sing">
        <label for="singing">唱</label>
        <input type="checkbox" id="dancing" name="dancing" value="dance">
        <label for="dancing">跳</label>
        <input type="checkbox" id="rapping" name="rapping" value="rap">
        <label for="rapping">rap</label><br><br>

        <label for="nationality">国籍:</label>
        <select id="nationality" name="nationality">
            <option value="中国">中国</option>
            <option value="美国">美国</option>
            <option value="英国">英国</option>
        </select><br><br>

        <label for="remarks">备注:</label><br>
        <textarea id="remarks" name="remarks" rows="4" cols="50"></textarea><br><br>

        <button type="submit">立即注册</button>
        <button type="button" onclick="setDefaultValues()">表单赋值</button>
        <button type="reset" onclick="clearDisplayInfo()">重置表单</button>
    </form><br><br>

    <div id="displayInfo"></div>

</body>
<script>
    // 获取用户名和密码元素
    var username = document.forms["regForm"]["username"];
    var password = document.forms["regForm"]["password"];

    // 实时验证用户名
    username.onchange = function () {
        var errorSpan = this.nextElementSibling; // 获取下一个兄弟元素节点
        if (this.value.length < 3) {
            errorSpan.textContent = "用户名至少需要3个字符";
        } else {
            errorSpan.textContent = "";
        }
    }
    // 实时验证密码
    password.onchange = function () {
        var errorSpan = this.nextElementSibling;
        if (this.value.length < 6) {
            errorSpan.textContent = "密码至少需要6个字符";
        } else {
            errorSpan.textContent = "";
        }
    }

    // 简单的客户端验证，并阻止表单的默认提交行为
    function validateAndDisplay(event) {
        if (username.value === "" || password.value === "") {
            alert("用户名和密码必须填写");
            event.preventDefault(); // 阻止表单提交
            return;
        }
        // 调用显示信息方法
        displayInfo();
        event.preventDefault(); // 阻止表单提交
    }

    // 在页面上显示信息
    function displayInfo() {
        // 获取页面上名称为"regForm"的表单
        var form = document.forms["regForm"];
        // 显示信息区域
        var div = document.getElementById("displayInfo");
        // 将选中的内容拼接返回页面
        div.innerHTML = "<strong>用户名：</strong>" + form.username.value + "<br/>" +
            "<strong>密码：</strong>" + form.password.value + "<br/>" +
            "<strong>性别：</strong>" + (form.gender[0].checked ? "男" : "女") + "<br/>" +
            "<strong>爱好：</strong>" + getHobbies(form) + "<br/>" +
            "<strong>国籍：</strong>" + form.nationality.value + "<br/>" +
            "<strong>备注：</strong><br/>" + form.remarks.value;
    }

    // 将选中的爱好拼接起来 若未选择默认无
    function getHobbies(form) {
        var hobbies = [];
        if (form.singing.checked) { hobbies.push('唱'); }
        if (form.dancing.checked) { hobbies.push('跳'); }
        if (form.rapping.checked) { hobbies.push('rap'); }
        return hobbies.join(", ") || "无";
    }

    // 设置默认值
    function setDefaultValues() {
        document.forms["regForm"]["username"].value = "默认用户名";
        document.forms["regForm"]["password"].value = "123";
        document.forms["regForm"]["gender"][0].checked = true; // 默认选中男
        document.forms["regForm"]["singing"].checked = true; // 默认选中唱歌
        document.forms["regForm"]["nationality"].value = "中国";
        document.forms["regForm"]["remarks"].value = "这是默认的备注内容。";
    }

    // 清空显示信息区域
    function clearDisplayInfo() {
        var div = document.getElementById("displayInfo");
        div.innerHTML = ""; // 清空显示信息区域
    }
</script>

</html>

返回顶部案例

基本功能：当页面滚动时，更新 <h1> 标签的内容为当前的 scrollTop 值，并且点击“返回顶部”链接时平滑地将页面滚动到顶部。

<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        body {height: 2000px;user-select: none;}
        h1 {position: fixed;top: 0;}
        
        h2 {position: fixed;bottom: 20px;right: 20px;}
        h2:hover {text-decoration: underline;}
    </style>
</head>
<body onscroll="setScroll()">
    <h1 id="scrollTop">0</h1>
    <h2 id="goBack" onclick="goTop()">返回顶部</h2>
</body>
<script>
    function setScroll() {
        document.getElementById("scrollTop").innerHTML = 
        document.documentElement.scrollTop;
    }
    function goTop(){
        document.documentElement.scrollTop = 0;
    }
</script>

显示当前滚动位置：

页面顶部 <h1> 标签实时显示当前页面的垂直滚动位置（scrollTop）。

返回顶部按钮：

点击页面底部右下角固定图标可以平滑滚动到页面顶部。

图标显示与隐藏：

当页面滚动超过 500 像素时，图标会显示。
当页面滚动到顶部（即 scrollTop 小于或等于 500 像素）时，图标会隐藏。

图标动画效果：

点击图标时，图标会向上平滑移动出视口，并在滚动完成后隐藏。

<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        body { height: 2000px; user-select: none; }
        h1 { position: fixed; top: 0; }
        img {position: fixed;bottom: 20px;right: 20px;cursor: pointer;width: 40px;transition: transform 0.5s ease-out; }/* 添加过渡效果 */
        img:hover { text-decoration: underline; }
        .hidden { opacity: 0; pointer-events: none; } /* 隐藏图标 元素将不会响应任何鼠标事件 */
        .move-up { transform: translateY(-100vh); } /* 平滑移动到顶部的类 */
    </style>
</head>
<body>
    <h1 id="scrollTop">0</h1>
    <img src="./img/top.png" id="goBack" onclick="goTop()"/>

    <script>
        function setScroll() {
            // 获取 scrollTop 的值 并赋给 h1
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            document.getElementById("scrollTop").innerHTML = scrollTop;

            // 控制图标显示与隐藏
            var goBackImg = document.getElementById("goBack");
            if (scrollTop > 500) {
                goBackImg.classList.remove('hidden');
            } else {
                goBackImg.classList.add('hidden');
            }
        }

        function goTop() {
            // 平滑滚动到顶部
            window.scrollTo({ top: 0, behavior: 'smooth' });

            // 添加 move-up 类以平滑移动图标
            var goBackImg = document.getElementById("goBack");
            goBackImg.classList.add('move-up');

            // 移除 move-up 类以便下次点击时可以再次触发动画
            setTimeout(() => {
                goBackImg.classList.remove('move-up');
                goBackImg.classList.add('hidden'); // 滚动到顶部后隐藏图标
            }, 500); // 与 transition 持续时间一致
        }

        // 添加滚动事件监听器
        window.addEventListener('scroll', setScroll);

        // 页面加载时初始化 scrollTop 显示
        setScroll();
    </script>
</body>