将JavaScript中document.write替换为document.getElementById的实现咨询

没问题，我来帮你把这段配送预估代码改成更健壮、灵活的实现方式——document.write确实不太推荐，尤其是在页面加载完成后调用的话，它会直接覆盖整个页面内容，用document.getElementById搭配innerHTML能让你更精准地控制内容显示的位置，也更符合现代前端开发的最佳实践。

步骤1：添加HTML占位容器 #

首先，在你希望显示配送预估信息的页面位置，添加一个带ID的容器元素：

<!-- 放在你想要展示预估配送日期的位置 -->
<div id="delivery-estimate"></div>

步骤2：修改JavaScript代码 #

接下来，把原来的代码改成通过DOM操作插入内容的形式，同时完善一些细节：

// 获取当前日期对象
const myDate = new Date();
let daystodeliver;

// 根据当前时间（是否早于14点）判断配送天数
if (myDate.getHours() < 14) {
  // 索引对应周日(0)到周六(6)的配送天数
  daystodeliver = [3, 2, 2, 2, 4, 5, 3][myDate.getDay()];
} else {
  daystodeliver = [3, 3, 3, 5, 4, 5, 3][myDate.getDay()];
}

// 计算预估配送日期
myDate.setDate(myDate.getDate() + daystodeliver);

// 完整的星期名称数组（补全你原来省略的部分）
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// 获取页面上的占位容器
const deliveryDisplayElement = document.getElementById('delivery-estimate');

// 确保找到元素后再插入内容，避免报错
if (deliveryDisplayElement) {
  // 自定义显示文本，这里可以根据需求调整格式
  deliveryDisplayElement.innerHTML = `Estimated delivery date: ${weekDays[myDate.getDay()]}`;
}

关键改进点说明 #

• 避免页面覆盖：不再使用document.write，而是精准定位到指定容器插入内容，不会影响页面其他部分
• 现代JS规范：用const/let替代var，提升代码的可读性和块级作用域安全性
• 容错处理：增加了if (deliveryDisplayElement)的判空检查，防止找不到DOM元素时抛出错误
• 可扩展性：你可以轻松修改innerHTML里的文本格式，比如加上具体的日期（myDate.toLocaleDateString()）或者样式类名，让显示效果更丰富

内容的提问来源于stack exchange，提问作者Richard