首页利用条件循环命令页面显示用户名以及文本框下方有按钮显示“切换” 点击切换按钮显示邮箱名以及文本框

利用条件循环命令页面显示用户名以及文本框下方有按钮显示“切换” 点击切换按钮显示邮箱名以及文本框

时间: 2024-09-12 12:10:13 浏览: 43

在Web开发中，你可以通过HTML、CSS和JavaScript来创建这样的界面。首先，你需要设置基础的HTML结构，包括一个包含用户名和文本框的区域，以及一个用于切换的按钮。下面是一个简单的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>用户信息切换</title> <style> .hidden { display: none; } </style> </head> <body> <div id="user-info"> <h2>当前显示：</h2> <label for="username">用户名:</label> <input type="text" id="username" placeholder="请输入用户名"><br>  <label for="email">邮箱:</label> <input type="text" id="email" class="hidden" placeholder="请输入邮箱"><br> <button onclick="toggleInfo()">切换</button> </div> <script> function toggleInfo() { var usernameInput = document.getElementById("username"); var emailInput = document.getElementById("email"); // 切换显示状态 if (emailInput.classList.contains("hidden")) { emailInput.style.display = "block"; usernameInput.style.display = "none"; } else { emailInput.style.display = "none"; usernameInput.style.display = "block"; } // 更新按钮文案，例如：“切换到邮箱” 或 “切换回用户名” if (emailInput.style.display === "none") { emailInput.classList.add("hidden"); document.querySelector("button").innerText = "切换到用户名"; } else { emailInput.classList.remove("hidden"); document.querySelector("button").innerText = "切换到邮箱"; } } </script> </body> </html> ``` 在这个例子中，当点击“切换”按钮时，会调用`toggleInfo`函数，该函数会切换显示的输入字段，并更新按钮的文字。初始状态下，“用户名”字段可见，“邮箱”字段隐藏。

阅读全文