以下代码实现了一个简单的交互式网页,它的功能是让用户输入自己的名字,并在提交按钮被点击时,在网页上显示一个欢迎信息,例如"Hello, [name]!"。具体地,该网页包括一个文本框和一个按钮。当用户在文本框中输入名字并点击按钮时,JavaScript代码会获取文本框的值,将其添加到一段HTML文本中并显示在网页上。这个过程通过showName()
函数实现。因此,该网页的需求是让用户能够输入名字,并在网页上看到欢迎信息。
下面是一个简单的交互式网页代码示例,它包括一个按钮和一个文本框,在用户点击按钮时,网页会将文本框中的内容显示在一个段落中:
<!DOCTYPE html> <html> <head> <title>Interactive Web Page</title> </head> <body> <h1>Interactive Web Page Demo</h1> <p>Enter your name:</p> <input type="text" id="name"> <button onclick="showName()">Submit</button> <p id="output"></p> <script type="text/javascript"> function showName() { var name = document.getElementById("name").value; document.getElementById("output").innerHTML = "Hello, " + name + "!"; } </script> </body> </html>
在这个例子中,我们首先定义了一个标题和一些文本,然后添加了一个文本框和一个按钮。当用户点击按钮时,showName()
函数会被调用。该函数使用document.getElementById()
方法获取文本框的值,并将其显示在页面的一个段落中,从而实现了交互式效果。注意,在这个例子中,我们使用了JavaScript来实现交互逻辑。
评论