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

您可以尝试使用absoloute定位的div：

你的HTML代码中的

：我的文字

在你的CSS中 #mydiv { 位置：绝对的; 顶部：0; 右：0; 宽度：200像素; }

您可以使用jquery

定位div

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

参考文献：

在随机位置写文字

2 个答案: