<!DOCTYPE html>
<html>
<head>
<title>我的动态网页</title>
</head>
<body>
<h1>欢迎来到我的动态网页!</h1>
<p>这是一个动态网页示例,它将根据您的输入动态生成内容。</p>
<form>
<label for="name">请输入您的姓名:</label>
<input type="text" id="name" name="name">
<br><br>
<input type="submit" value="提交">
</form>
<div id="content"></div>
<script>
// 获取表单元素和内容部分元素
const form = document.querySelector('form');
const contentDiv = document.getElementById('content');
// 添加提交事件监听器
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取输入的姓名
const name = document.getElementById('name').value;
// 动态生成内容并显示在页面上
const newContent = 姓名:${name}
;
contentDiv.innerHTML = newContent;
});
</script>
</body>
</html>
这段代码创建了一个简单的动态网页,包含一个标题和一个表单,当用户填写表单并点击提交按钮时,会动态生成一个包含输入姓名的内容,并将其显示在页面上,你可以根据需要修改代码,添加更多的动态功能和样式。