javascript - 在随机位置写入文本

标签 javascript

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

最佳答案

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

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

其中_可以通过Math.random()生成。此函数返回 0 到 1 之间的十进制值,因此对其进行适当拉伸(stretch)和舍入以获得屏幕上的随机整数像素坐标: 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);
});

关于javascript - 在随机位置写入文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13381387/

相关文章:

javascript - 特定宽高比时的特定浏览器缩放

javascript - Mobile Safari 键盘表单提交

javascript - 如何从 jQuery 的 $.ajax() 函数调用 servlet

javascript - 为下拉选项分配多个值

javascript - shell 命令到 child_process.spawn(command, [args], [options]) node.js

javascript - 嵌套 foreach jquery child

javascript - 使用 svg.js 和 svg-pan-zoom 如何获取当前 "viewport"中心点?

javascript - React Function 组件与状态和(箭头)函数相结合

javascript - 在 JavaScript 中使用 ajax 后更改动画类的最佳实践

javascript - 如何在 Haml 中包含内联 JavaScript?