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

Question

我想弄清楚如何制作一个 anchor 标记，当页面从我的列表中随机刷新时，该标记每次都会更改。

假设我有这个列表

<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 那样做任何额外的工作，比如检查是否与主题相关。

请告诉我我该怎么做。

谢谢

Answer 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'
];

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

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

将该列表中的最后一个脚本(即此脚本元素)存储在 this_script 中:

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

我会将下一行分成更小的部分。
Math.random给出 Number在 0 之间(含)和1 (独家的)。将它乘以 3 得到 0 之间的均匀分布。 (含)和3 (独占)和 Math.floor chop 它。这给出了 0 之间的随机整数和 2包括的。如果您向数组添加元素，它将更新，因为它在计算中使用 phrases.length，而不是文字 3:

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

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

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);