首页在JS中实现一个动态添加和显示用户名的效果⻚面如下：1.网⻚⻚面中有单行文本框用于添加用户姓名，点击按钮后会将用户姓名添加进用户的列表中,2.实现点击按钮后会将用户姓名添加进用户的列表中显示在⻚面中,3.实现点击用户列表中的任意一项后会将浏览器弹框显示中显示在⻚面中

在JS中实现一个动态添加和显示用户名的效果⻚面如下：1.网⻚⻚面中有单行文本框用于添加用户姓名，点击按钮后会将用户姓名添加进用户的列表中,2.实现点击按钮后会将用户姓名添加进用户的列表中显示在⻚面中,3.实现点击用户列表中的任意一项后会将浏览器弹框显示中显示在⻚面中

时间: 2024-12-22 16:24:21 浏览: 3

在JavaScript中，你可以通过HTML、CSS和JavaScript结合来实现这个动态添加和显示用户名的效果。以下是简化的步骤： 1. HTML结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>动态用户名页面</title> <style> ul { list-style-type: none; padding: 0; } li { cursor: pointer; } </style> </head> <body> <input type="text" id="usernameInput" placeholder="请输入用户名"> <button onclick="addUsername()">添加用户</button> <ul id="usersList"></ul>  <script type="text/javascript"> function showAlert(username) { alert("您选择了：" + username); } </script> </body> </html> ``` 2. JavaScript逻辑： ```javascript function addUsername() { var username = document.getElementById('usernameInput').value; if (username) { var userList = document.getElementById('usersList'); var liElement = document.createElement('li'); liElement.textContent = username; liElement.onclick = function () { showAlert(this.textContent); }; userList.appendChild(liElement); document.getElementById('usernameInput').value = ''; } else { alert('请输入用户名'); } } ``` 在这个例子中，当用户输入用户名并点击“添加用户”按钮时，新添加的`<li>`元素会被添加到用户列表，并绑定了一个点击事件，当列表项被点击时，会触发`showAlert`函数，弹出包含用户名的警告框。

阅读全文