复制
收藏
提问
全网

<!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8"> <title>登录注册</title> <link rel="stylesheet" href="./css/login.css"> </head> <body> <div style="background-image: url(download.jfif); background-size:100% 100%;margin: auto;width: 100%;height: 635px;"> <section id="content"> <div class="header"> <a href="javascript:;" class="current">我要登录</a> <a href="javascript:;">我要注册</a> </div> <div id=body> <div class="dom" style="display: block;"> <form> <div id="s1"> <h>账号</h> <input id="input" type="text" placeholder="手机/邮箱/用户名"> </div> <div id="s1"> <h>密码</h> <input id="input" type="password" placeholder="密码"> </div> <div id="s1"> <input type="checkbox"> <span>记住密码</span> </div> <input id="button" type="submit" value="登&nbsp;录"> </form> <div id="s1"> <a href="#">找回密码</a> <span>|</span> <span>还没有注册帐号?</span> <a href="#">立即注册</a> </div> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> <div class="dom"> <form> <div id="s1"> <h>手机号码</h> <input id="input" type="text" placeholder="填写你的手机号码作为登录账户"> </div> <div id="s1"> <h>用户名</h> <input id="input" type="password" placeholder="中、英文均可, 最长20个字符或10个汉字"> </div> <div id="s1"> <h>密码</h> <input id="input" type="text" placeholder="6-30位英文、数字、符号, 区分大小写"> </div> <div id="s1"> <h>短信验证码</h><br> <input id="input1" type="text" placeholder="填写短信验证码"> <input id="button1" type="button" value="获取短信验证码"> </div> <input id="button" type="submit" value="注&nbsp;册"> </form> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> </div> </section> <script> window.onload = function () { // 1.1 获取需要的标签 let as = document.getElementsByClassName('header')[0].getElementsByTagName('a'); let contents = document.getElementsByClassName('dom'); // 1.2 遍历 for (let i = 0; i < as.length; i++) { // 1.2.1 取出单个对象 let a = as[i]; a.id = i; // 1.2.2 监听鼠标的移动事件 a.onclick = function () { // 让所有的a的class都清除 for (let j = 0; j < as.length; j++) { as[j].className = ''; contents[j].style.display = 'none'; } // 设置当前a的class this.className = 'current'; // 从contents数组中取出对应的标签 contents[this.id].style.display = 'block';

41acbaa8b
3个月前
全网
文档
学术
百科
知识库
时间不限
自动
来源0

理解问题<!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8"> <title>登录注册</title> <link rel="stylesheet" href="./css/login.css"> </head> <body> <div style="background-image: url(download.jfif); background-size:100% 100%;margin: auto;width: 100%;height: 635px;"> <section id="content"> <div class="header"> <a href="javascript:;" class="current">我要登录</a> <a href="javascript:;">我要注册</a> </div> <div id=body> <div class="dom" style="display: block;"> <form> <div id="s1"> <h>账号</h> <input id="input" type="text" placeholder="手机/邮箱/用户名"> </div> <div id="s1"> <h>密码</h> <input id="input" type="password" placeholder="密码"> </div> <div id="s1"> <input type="checkbox"> <span>记住密码</span> </div> <input id="button" type="submit" value="登&nbsp;录"> </form> <div id="s1"> <a href="#">找回密码</a> <span>|</span> <span>还没有注册帐号?</span> <a href="#">立即注册</a> </div> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> <div class="dom"> <form> <div id="s1"> <h>手机号码</h> <input id="input" type="text" placeholder="填写你的手机号码作为登录账户"> </div> <div id="s1"> <h>用户名</h> <input id="input" type="password" placeholder="中、英文均可, 最长20个字符或10个汉字"> </div> <div id="s1"> <h>密码</h> <input id="input" type="text" placeholder="6-30位英文、数字、符号, 区分大小写"> </div> <div id="s1"> <h>短信验证码</h><br> <input id="input1" type="text" placeholder="填写短信验证码"> <input id="button1" type="button" value="获取短信验证码"> </div> <input id="button" type="submit" value="注&nbsp;册"> </form> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> </div> </section> <script> window.onload = function () { // 1.1 获取需要的标签 let as = document.getElementsByClassName('header')[0].getElementsByTagName('a'); let contents = document.getElementsByClassName('dom'); // 1.2 遍历 for (let i = 0; i < as.length; i++) { // 1.2.1 取出单个对象 let a = as[i]; a.id = i; // 1.2.2 监听鼠标的移动事件 a.onclick = function () { // 让所有的a的class都清除 for (let j = 0; j < as.length; j++) { as[j].className = ''; contents[j].style.display = 'none'; } // 设置当前a的class this.className = 'current'; // 从contents数组中取出对应的标签 contents[this.id].style.display = 'block';

已完成理解「<!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8"> <title>登录注册</title> <link rel="stylesheet" href="./css/login.css"> </head> <body> <div style="background-image: url(download.jfif); background-size:100% 100%;margin: auto;width: 100%;height: 635px;"> <section id="content"> <div class="header"> <a href="javascript:;" class="current">我要登录</a> <a href="javascript:;">我要注册</a> </div> <div id=body> <div class="dom" style="display: block;"> <form> <div id="s1"> <h>账号</h> <input id="input" type="text" placeholder="手机/邮箱/用户名"> </div> <div id="s1"> <h>密码</h> <input id="input" type="password" placeholder="密码"> </div> <div id="s1"> <input type="checkbox"> <span>记住密码</span> </div> <input id="button" type="submit" value="登&nbsp;录"> </form> <div id="s1"> <a href="#">找回密码</a> <span>|</span> <span>还没有注册帐号?</span> <a href="#">立即注册</a> </div> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> <div class="dom"> <form> <div id="s1"> <h>手机号码</h> <input id="input" type="text" placeholder="填写你的手机号码作为登录账户"> </div> <div id="s1"> <h>用户名</h> <input id="input" type="password" placeholder="中、英文均可, 最长20个字符或10个汉字"> </div> <div id="s1"> <h>密码</h> <input id="input" type="text" placeholder="6-30位英文、数字、符号, 区分大小写"> </div> <div id="s1"> <h>短信验证码</h><br> <input id="input1" type="text" placeholder="填写短信验证码"> <input id="button1" type="button" value="获取短信验证码"> </div> <input id="button" type="submit" value="注&nbsp;册"> </form> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> </div> </section> <script> window.onload = function () { // 1.1 获取需要的标签 let as = document.getElementsByClassName('header')[0].getElementsByTagName('a'); let contents = document.getElementsByClassName('dom'); // 1.2 遍历 for (let i = 0; i < as.length; i++) { // 1.2.1 取出单个对象 let a = as[i]; a.id = i; // 1.2.2 监听鼠标的移动事件 a.onclick = function () { // 让所有的a的class都清除 for (let j = 0; j < as.length; j++) { as[j].className = ''; contents[j].style.display = 'none'; } // 设置当前a的class this.className = 'current'; // 从contents数组中取出对应的标签 contents[this.id].style.display = 'block'; 」

展开阅读网页

看起来你正在尝试编写一个网页的登录和注册界面，并且已经包含了一些基本的HTML和CSS代码。你的JavaScript代码片段似乎是用来切换登录和注册表单的显示状态。不过，你的JavaScript代码中存在一些错误和不规范的地方，我将帮你修正并提供一些改进建议。

  1. 你的for循环中给a元素设置了id属性，这是不必要的，因为a元素已经通过i变量在循环中被区分开了。

  2. 你的onclick事件处理器应该使用addEventListener方法来添加，这样可以避免多次绑定同一个事件。

  3. 你的onclick事件处理器中，应该使用this.id来获取当前点击的a元素的索引，而不是直接使用this。

  4. 你的input元素的type属性在注册表单中被重复使用了，这可能会导致样式或功能上的冲突。

  5. 注册表单中的密码字段使用了type="text"，这通常不是推荐的做法，因为密码应该隐藏输入内容，使用type="password"更为合适。

下面是根据上述建议修改后的JavaScript代码：

window.onload = function () {
    // 获取需要的标签
    let as = document.getElementsByClassName('header')[0].getElementsByTagName('a');
    let contents = document.getElementsByClassName('dom');

    // 遍历并为每个a元素添加点击事件
    for (let i = 0; i < as.length; i++) {
        let a = as[i];
        // 使用addEventListener添加点击事件
        a.addEventListener('click', function () {
            // 让所有的a的class都清除
            for (let j = 0; j < as.length; j++) {
                as[j].className = '';
                contents[j].style.display = 'none';
            }

            // 设置当前a的class
            this.className = 'current';
            // 显示对应的内容区域
            contents[this.id].style.display = 'block';
        });
    }
};

请注意，这段代码假设你的HTML结构是正确的，并且current类在CSS中已经定义好了，用于突出显示当前选中的标签。同时，确保你的CSS文件./css/login.css已经被正确链接，并且包含了必要的样式定义。

更专业一些
转笔记
专业
<!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8"> <title>登录注册</title> <link rel="stylesheet" href="./css/login.css"> </head> <body> <div style="background-image: url(download.jfif); background-size:100% 100%;margin: auto;width: 100%;height: 635px;"> <section id="content"> <div class="header"> <a href="javascript:;" class="current">我要登录</a> <a href="javascript:;">我要注册</a> </div> <div id=body> <div class="dom" style="display: block;"> <form> <div id="s1"> <h>账号</h> <input id="input" type="text" placeholder="手机/邮箱/用户名"> </div> <div id="s1"> <h>密码</h> <input id="input" type="password" placeholder="密码"> </div> <div id="s1"> <input type="checkbox"> <span>记住密码</span> </div> <input id="button" type="submit" value="登&nbsp;录"> </form> <div id="s1"> <a href="#">找回密码</a> <span>|</span> <span>还没有注册帐号?</span> <a href="#">立即注册</a> </div> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> <div class="dom"> <form> <div id="s1"> <h>手机号码</h> <input id="input" type="text" placeholder="填写你的手机号码作为登录账户"> </div> <div id="s1"> <h>用户名</h> <input id="input" type="password" placeholder="中、英文均可, 最长20个字符或10个汉字"> </div> <div id="s1"> <h>密码</h> <input id="input" type="text" placeholder="6-30位英文、数字、符号, 区分大小写"> </div> <div id="s1"> <h>短信验证码</h><br> <input id="input1" type="text" placeholder="填写短信验证码"> <input id="button1" type="button" value="获取短信验证码"> </div> <input id="button" type="submit" value="注&nbsp;册"> </form> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> </div> </section> <script> window.onload = function () { // 1.1 获取需要的标签 let as = document.getElementsByClassName('header')[0].getElementsByTagName('a'); let contents = document.getElementsByClassName('dom'); // 1.2 遍历 for (let i = 0; i < as.length; i++) { // 1.2.1 取出单个对象 let a = as[i]; a.id = i; // 1.2.2 监听鼠标的移动事件 a.onclick = function () { // 让所有的a的class都清除 for (let j = 0; j < as.length; j++) { as[j].className = ''; contents[j].style.display = 'none'; } // 设置当前a的class this.className = 'current'; // 从contents数组中取出对应的标签 contents[this.id].style.display = 'block';
不在提醒

更专业内容正在努力生成中
知识树
<!DOCTYPE html> <html lang="en"> <head> <meta charset=UTF-8"> <title>登录注册</title> <link rel="stylesheet" href="./css/login.css"> </head> <body> <div style="background-image: url(download.jfif); background-size:100% 100%;margin: auto;width: 100%;height: 635px;"> <section id="content"> <div class="header"> <a href="javascript:;" class="current">我要登录</a> <a href="javascript:;">我要注册</a> </div> <div id=body> <div class="dom" style="display: block;"> <form> <div id="s1"> <h>账号</h> <input id="input" type="text" placeholder="手机/邮箱/用户名"> </div> <div id="s1"> <h>密码</h> <input id="input" type="password" placeholder="密码"> </div> <div id="s1"> <input type="checkbox"> <span>记住密码</span> </div> <input id="button" type="submit" value="登&nbsp;录"> </form> <div id="s1"> <a href="#">找回密码</a> <span>|</span> <span>还没有注册帐号?</span> <a href="#">立即注册</a> </div> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> <div class="dom"> <form> <div id="s1"> <h>手机号码</h> <input id="input" type="text" placeholder="填写你的手机号码作为登录账户"> </div> <div id="s1"> <h>用户名</h> <input id="input" type="password" placeholder="中、英文均可, 最长20个字符或10个汉字"> </div> <div id="s1"> <h>密码</h> <input id="input" type="text" placeholder="6-30位英文、数字、符号, 区分大小写"> </div> <div id="s1"> <h>短信验证码</h><br> <input id="input1" type="text" placeholder="填写短信验证码"> <input id="button1" type="button" value="获取短信验证码"> </div> <input id="button" type="submit" value="注&nbsp;册"> </form> <div id="s2"> <span>使用第三方账号直接登录</span> <div class="s3"> <a href="#"> <img src="images/qq.png" alt=""> </a> <a href="#"> <img src="images/wechat.png" alt=""> </a> </div> </div> </div> </div> </section> <script> window.onload = function () { // 1.1 获取需要的标签 let as = document.getElementsByClassName('header')[0].getElementsByTagName('a'); let contents = document.getElementsByClassName('dom'); // 1.2 遍历 for (let i = 0; i < as.length; i++) { // 1.2.1 取出单个对象 let a = as[i]; a.id = i; // 1.2.2 监听鼠标的移动事件 a.onclick = function () { // 让所有的a的class都清除 for (let j = 0; j < as.length; j++) { as[j].className = ''; contents[j].style.display = 'none'; } // 设置当前a的class this.className = 'current'; // 从contents数组中取出对应的标签 contents[this.id].style.display = 'block';
HTML登录注册页面设计
登录注册页面前端实现
如何实现记住密码功能
在线客服