运用java script中Dom和Bom的知识编写1. 创建根据不同来宾显示不同内容的欢迎栏 2. 退出页面时显示浏览当前页面的时间 3. 实现复制表单

1. 创建根据不同来宾显示不同内容的欢迎栏

HTML：

<div id="welcome"></div>

JavaScript：

const name = prompt("请输入您的名字：");
const age = parseInt(prompt("请输入您的年龄："));

let message = "";

if (age < 18) {
  message = `Hi ${name}，你还未成年，不可观看本网站的内容！`;
} else {
  message = `Hi ${name}，欢迎来到本网站！`;
}

const welcomeDiv = document.getElementById("welcome");
welcomeDiv.textContent = message;

2. 退出页面时显示浏览当前页面的时间

HTML：

<div id="time"></div>

JavaScript：

window.addEventListener("unload", function (event) {
  const timeDiv = document.getElementById("time");
  const now = new Date();
  timeDiv.textContent = `您在 ${now.toLocaleString()} 浏览了本页面。`;
});

3. 实现复制表单

HTML：

<form id="form">
  <div>
    <label>姓名：</label>
    <input type="text" name="name" />
  </div>
  <div>
    <label>年龄：</label>
    <input type="number" name="age" />
  </div>
  <div>
    <label>性别：</label>
    <input type="radio" name="gender" value="male" />男
    <input type="radio" name="gender" value="female" />女
  </div>
  <div>
    <label>爱好：</label>
    <input type="checkbox" name="hobbies" value="reading" />阅读
    <input type="checkbox" name="hobbies" value="music" />音乐
    <input type="checkbox" name="hobbies" value="sports" />运动
  </div>
  <button type="button" onclick="copyForm()">复制表单</button>
</form>

JavaScript：

function copyForm() {
  const form = document.getElementById("form");
  const clone = form.cloneNode(true);
  form.parentNode.insertBefore(clone, form.nextSibling);
}

当点击“复制表单”按钮时，会复制表单并插入到原表单的后面。注意，复制的表单中的元素的 name 属性必须唯一，否则提交时会出错。