前端新手求助：如何实现用户提交内容的屏幕随机位置多显示？

直接给你修改后的完整代码，关键部分我会标注说明：

<!-- 输入区域 -->
<input type="text" id="myText" placeholder="输入内容后提交">
<button onclick="myFunction()">提交</button>

<script>
function myFunction() {
    // 获取输入值并过滤空内容
    const inputVal = document.getElementById("myText").value.trim();
    if (!inputVal) return;

    // 创建新的内容元素
    const contentItem = document.createElement("div");
    contentItem.textContent = inputVal;

    // 设置绝对定位，让元素可以自由定位
    contentItem.style.position = "absolute";
    // 计算随机X坐标：避免元素超出屏幕右侧
    const maxX = window.innerWidth - contentItem.offsetWidth;
    contentItem.style.left = Math.floor(Math.random() * maxX) + "px";
    // 计算随机Y坐标：避免元素超出屏幕底部
    const maxY = window.innerHeight - contentItem.offsetHeight;
    contentItem.style.top = Math.floor(Math.random() * maxY) + "px";

    // 基础样式优化，让内容块更显眼
    contentItem.style.padding = "8px 14px";
    contentItem.style.backgroundColor = "#f5f5f5";
    contentItem.style.borderRadius = "6px";
    contentItem.style.boxShadow = "0 2px 6px rgba(0,0,0,0.1)";
    contentItem.style.zIndex = 10; // 确保内容块在其他元素上方

    // 将元素添加到页面中
    document.body.appendChild(contentItem);

    // 清空输入框，方便继续输入
    document.getElementById("myText").value = "";
}
</script>

核心修改说明： #

• 避免内容覆盖：每次提交都会创建新的<div>元素，而非修改同一个元素的内容，所以之前提交的内容会保留在页面上。
• 随机位置实现：通过position: absolute脱离文档流，再用Math.random()生成随机的left和top值，同时计算窗口与元素的尺寸差，防止内容超出屏幕。
• 基础体验优化：增加空内容判断、提交后清空输入框、给内容块添加基础样式提升可读性。

如果需要点击内容块即可删除的功能，可以在创建contentItem后添加这段代码：

contentItem.addEventListener("click", function() {
    this.remove();
});

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