每次刷新页面时随机链接？

Posted 2023-02-25

【中文标题】每次刷新页面时随机链接？

【英文标题】：random the link everytime the page is refresh?

【发布时间】：2012-06-06 06:55:22

【问题描述】：

我试图弄清楚如何制作一个锚标记，当页面从我拥有的列表中随机刷新时，该标记每次都会发生变化。

假设我有这份清单

<a href="http://testpage.com/">This is the first one</a>
<a href="http://testpage.com/">This is the second one</a>
<a href="http://testpage.com/">This is the third one</a>

这是第一个 这是第二个 这是第三个

它就像 Adsense 的链接单元广告，但我只是希望它做简单的随机而不做任何额外的工作，比如检查是否与主题相关或不像 adsense 那样。

请告诉我该怎么做。

谢谢

【问题讨论】：

使用 Math.random() 并将每个标签分配给一个范围。但是使用 php 会容易得多。

锚点列表从何而来？一个 JS 数组？

【参考方案1】：

<a href="http://testpage.com/">
<script type="text/javascript">
    // This script will replace itself with a random one of these phrases
    var phrases = [
        'This is the first one',
        'This is the second one',
        'This is the third one'
    ];

    var scripts = document.getElementsByTagName('script');
    var this_script = scripts[scripts.length - 1];
    this_script.parentNode.replaceChild(document.createTextNode(phrases[Math.floor(Math.random()*phrases.length)]), this_script);
</script>
</a>​

JSFiddle

---

细分

创建一个包含三个字符串的数组字面量：

var phrases = [
    'This is the first one',
    'This is the second one',
    'This is the third one'
];

在页面上获取所有script elements 中的NodeList（因为页面已经加载到这一点，所以之前和包括这个的所有脚本）：

var scripts = document.getElementsByTagName('script');

将该列表中的最后一个脚本（即，此脚本元素）存储在this_script：

var this_script = scripts[scripts.length - 1];

我将把下一行分成更小的部分。Math.random 在0（包括）和1（不包括）之间给出Number。将它乘以 3 可以在 0（包括）和 3（不包括）和 Math.floor 之间截断它。这给出了一个介于 0 和 2 之间的随机整数。如果将元素添加到数组中，它将更新，因为它在计算中使用了phrases.length，而不是文字 3：

Math.floor(Math.random()*phrases.length)

document.createTextNode 创建并返回一个实现 Text 接口的新节点，它的数据就是传入的值。在这种情况下，它是短语数组中的一个随机元素：

document.createTextNode(phrases[Math.floor(Math.random()*phrases.length)])

Node.parentNode 是不言自明的，在这种情况下，脚本元素的父级将是 htmlAnchorElement（由树中脚本上方的 <a> 标记表示）。 Node.replaceChild 接受两个参数，一个 new_child 和一个 old_child。我们为new child 传入了新的文本节点，为old_child 传入了这个脚本，这会导致这个脚本从DOM 中移除并替换为文本节点：

this_script.parentNode.replaceChild(document.createTextNode(phrases[Math.floor(Math.random()*phrases.length)]), this_script);

【讨论】：

这太棒了！我会稍微了解一下，以后我自己也可以使用它！

@Ali 太棒了！ :) 如果你想让我把它分解一下并解释一下，请告诉我。

非常有趣的方式是通过获取random(0-1)*array.length 的floor 来为每个项目提供平等的机会，从而利用JS 数组的基于0 的特性。 +1

@PaulP.R.O.我喜欢！我实际上正在 Seneca @ York 学习计算机编程，我真的很想知道更多......

【参考方案2】：

你可以像这样使用php：

<?php $linkName = mt_rand(1,3);
 if ($linkName == 1) echo '<a href="http://testpage.com/">This is the first one</a>';
 if ($linkName == 2) echo '<a href="http://testpage.com/">This is the second one</a>';
 if ($linkName == 3) echo '<a href="http://testpage.com/">This is the third one</a>';
?>

【讨论】：

注意问题是关于JS的。