运用java script中在一个html里用Bom完成1. 创建根据不同来宾显示不同内容的欢迎栏 2. 退出页面时显示浏览当前页面的时间 3. 实现复制表单
时间: 2024-03-05 12:51:06 浏览: 18
可以在同一个 HTML 文件中实现这三个功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>BOM Demo</title>
<script>
window.onload = function() {
// 1. 创建根据不同来宾显示不同内容的欢迎栏
var userName = prompt("请输入您的姓名:");
var welcomeBar = document.getElementById("welcome-bar");
if (userName) {
welcomeBar.innerHTML = "欢迎您," + userName + "!";
} else {
welcomeBar.innerHTML = "欢迎访问本网站!";
}
// 2. 退出页面时显示浏览当前页面的时间
window.onbeforeunload = function() {
var now = new Date();
return "您正在离开本页面,浏览时间:" + now.toLocaleString() + "。";
};
// 3. 实现复制表单
var copyButton = document.getElementById("copy-button");
copyButton.onclick = function() {
var originalForm = document.getElementById("original-form");
var clonedForm = originalForm.cloneNode(true);
var formContainer = document.getElementById("form-container");
formContainer.appendChild(clonedForm);
};
};
</script>
</head>
<body>
<!-- 1. 创建根据不同来宾显示不同内容的欢迎栏 -->
<div id="welcome-bar"></div>
<!-- 3. 实现复制表单 -->
<div id="form-container">
<form id="original-form">
<!-- 表单内容 -->
</form>
</div>
<button id="copy-button">复制表单</button>
</body>
</html>
```
请注意,第一部分和第二部分的代码要在 `window.onload` 中执行,因为它们需要等待页面加载完成后才能执行。第三部分的代码可以放在 `window.onload` 中,也可以放在页面的任何位置,因为它不需要等待页面加载完成。