javascript - 在随机位置写入文本

Question

我对javascript相当陌生，我正在尝试创建一个界面，其中多个用户将一串文本输入到表单中，提交后，文本与以前的用户输入一起随机出现在页面上。有没有办法用javascript做到这一点？我主要在寻找一种将文本写入屏幕上特定位置的方法时遇到问题。

Answer 1

这个想法是你每次都创建一个新元素，并在其上设置以下 CSS 以便能够手动定位它：

position: absolute;
left: _px;
top: _px;

哪里_可以通过Math.random(). 此函数返回一个介于 0 和 1 之间的十进制值，因此适当拉伸和舍入它以获得屏幕上的随机整数像素坐标：http: //jsfiddle.net/6eTcD/2/。

​document.querySelector("form").addEventListener("submit", function(e) {
    e.preventDefault();

    var fullWidth = window.innerWidth;
    var fullHeight = window.innerHeight;

    var text = this.querySelector("input[type='text']").value;

    var elem = document.createElement("div");
    elem.textContent = text;
    elem.style.position = "absolute";
    elem.style.left = Math.round(Math.random() * fullWidth) + "px";
    elem.style.top = Math.round(Math.random() * fullHeight) + "px";
    document.body.appendChild(elem);
});

Answer 2

您可以尝试使用绝对定位的 div，如下所示：

在您的 html 代码中：我的文本

在你的 CSS #mydiv { position:absolute; 顶部：0；对：0；宽度：200px；}

你可以用jquery定位你的div

$('div.example').css('top', 100);

参考：

1. 分区样式
2. jQuery改变风格