每次页面刷新时随机链接？ [英] random the link everytime the page is refresh?

问题描述

我正在试图找出如何制作一个锚标记，当我从列表中随机刷新页面时，每次都会更改。

I'm trying to figure out how can I make one anchor tag that will everytime change when the page is refresh random from the list I have.

说我有这个清单

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

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

This is the first one This is the second one This is the third one

它就像Adsense所拥有的链接单元广告但我只是想让它做一个简单的随机不做任何类型的额外工作，如检查是否与主题相关或不喜欢adsense。

it is like Link Unit ads that Adsense has but I just want it to do simple random not to do any kind of extra work like check if is relate the topic or not like adsense does.

请告诉我该怎么办。

谢谢

推荐答案

<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

细分

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

Create an array literal containing three strings:

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

获取脚本元素的NodeListrel =nofollow> NodeList 在页面上（因为页面已经加载到这一点，因此所有脚本在此之前和之后都包括在内）：

Get a NodeList of all script elements on the page (as the page has loaded up to this point, so all scripts before and including this one):

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

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

Store the last script in that list (IE. this script element) in this_script:

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

我会将下一行分成更小的部分。

< a href =https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/random =nofollow> Math.random 给出数字 0 （含）和 1 （独家）。将它乘以3可得出 0 （含）和 3 （不包括）和 Math.floor 截断它。这给出了 0 和 2 之间的随机整数。如果你向数组添加元素，它会更新，因为它在计算中使用phrase.length，而不是文字3：

I'll break this next line up into smaller segments.
Math.random gives a Number between 0 (inclusive) and 1 (exclusive). Multiplying it by 3 gives an even distribution between 0 (inclusive) and 3 (exclusive) and Math.floor truncates it. This gives a random integer between 0 and 2 inclusive. If you add elements to the array it will update because it uses phrases.length in the calculation, instead of a literal 3:

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

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

document.createTextNode creates and returns a new Node implementing the Text interface, it's data is just the value that's passed in. In this case it's a random element from the phrases array:

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

Node.parentNode 是不言自明的，在这种情况下，script元素的父元素将是 HTMLAnchorElement （由上面的< a> 标记表示pt在树上）。 Node.replaceChild 包含两个参数， new_child 和 old_child 。我们传入新的文本节点为新子，以及 old_child 的这个脚本，这会导致删除此脚本来自DOM并替换为文本节点：

Node.parentNode is self explanatory, in this case the parent of the script element will be the HTMLAnchorElement (that is represented by the <a> tag above the script in the tree). Node.replaceChild takes in two arguments, a new_child and an old_child. We passed in our new Text Node for new child, and this script for old_child, which causes this script to be removed from the DOM and replaced with the Text Node:

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

这篇关于每次页面刷新时随机链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！