javascript - 如何使链接在每次页面加载时显示在随机位置?

标签 javascript jquery html

我正在开发一个项目,我希望可点击的链接在您每次访问/刷新页面时出现在不同的位置。到目前为止,我已经得到了这个:

<script>
for (var i=1; i <= 1; i++) {
    var x = Math.max(0, Math.min(70, Math.ceil(Math.random() * 100)));
    $('<div1>').css({
        position: 'absolute',
        width: '150px',
        height: '50px',
        left: x + '%',
    }).html("<p>CLICK ME<p>").appendTo('body');
}

这段代码做了我想要它做的事情,但我不知道如何添加一个链接。添加<a>标记到它的 .html 部分不起作用(我以前也从未真正使用过 jQuery)。我想知道我做错了什么,以及如何解决这个问题。

最佳答案

为此,您实际上并不需要 jQuery,以下是您可以做到的方法:

jsfiddle: https://jsfiddle.net/nt6zodmh/

var top = Math.floor(Math.random() * 100); // number between 1-99
var left = Math.floor(Math.random() * 100); // number between 1-99
var a = document.createElement('a');
a.href = 'https://google.com' // set href
a.innerHTML = 'CLICK ME';
// set style
a.style.position = 'absolute';
a.style.top = top+'%';
a.style.left = left+'%';
// add to body
document.body.appendChild(a)

关于javascript - 如何使链接在每次页面加载时显示在随机位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47931794/

相关文章:

javascript - 停止 iframe 捕获鼠标输入

javascript - 如何使用行索引更改剑道网格行的背景颜色

javascript - 未获取给定元素集中的最小属性值

javascript - jQuery 移动面板不会仅在 Android 浏览器上完全关闭

javascript - 如何使用javascript访问一个document.doc和.txt修改内容

javascript - 推特 Bootstrap : Uncaught TypeError: Object modal1 has no method 'toggle'

javascript - 如何通过AJAX查看数据库字段

javascript - 选择单选按钮后如何隐藏/禁用单选按钮

html - 文本对齐 :centre not aligning text correctly in <a>

php - 如何获取dom中特定类之后的所有p标签