0

我正在寻找一种在每次页面加载时更改一段 html 的方法。

例子。

我有三个链接：

<a href="http://www.google.com/test1">google test one</a>
<a href="http://www.google.com/test2">google test two</a>
<a href="http://www.google.com/test3">google test three</a>

每次有人加载页面时，链接都会改变。

页面版本 1：

<table style="border: 1px solid black"><td>  <a href="http://www.google.com/test1">google test one</a></td></table>

页面版本 2：

  <table style="border: 1px solid black"><td>  <a href="http://www.google.com/test2">google test two</a></td></table>

页面版本 3：

<table style="border: 1px solid black"><td>  <a href="http://www.google.com/test3">google test three</a></td></table>

有没有办法做到这一点？也许是JavaScript？我只知道html，所以我不太擅长这种事情。我试过在谷歌上搜索，但我不知道要搜索什么。

4

1 回答 1

4

记住这种动态行为需要客户端（）或服务器端（、等）解决方案，实现您想要的最简单的方法是以下方法：

var linksList = [
    'http://google.com/',
    'http://stackoverflow.com/',
    'http://slashdot.org/'
    ],
    el = document.getElementById('demo'),
    randomNumber = Math.floor(Math.random() * linksList.length);

el.href = linksList[randomNumber];
el.textContent = linksList[randomNumber];

JS 小提琴演示。

下面稍微复杂一点（它做同样的事情，但使用对象数组为每个链接提供更多可配置选项）：

var linksList = [{
    'url': 'http://google.com/',
        'text': 'Google.com'
}, {
    'url': 'http://stackoverflow.com/',
        'text': 'Programming Q&A'
}, {
    'url': 'http://slashdot.org/',
        'text': 'Slashdot: News for Nerds'
}],
    el = document.getElementById('demo'),
    randomNumber = Math.floor(Math.random() * linksList.length);

el.href = linksList[randomNumber].url;
el.textContent = linksList[randomNumber].text;

JS 小提琴演示。

一个稍微复杂一点（尽管此时它变得更易于维护）的方法是开始使用可以在多个项目上调用的函数：

function randomiseLinks(el, list) {
    if (!el || !list) {
        return false;
    } else {
        var randomNumber = Math.floor(Math.random() * list.length);
        el.href = list[randomNumber].url;
        el.textContent = list[randomNumber].text;
    }
}

var linksList = [{
    'url': 'http://google.com/',
        'text': 'Google.com'
}, {
    'url': 'http://stackoverflow.com/',
        'text': 'Programming Q&A'
}, {
    'url': 'http://slashdot.org/',
        'text': 'Slashdot: News for Nerds'
}],
    links = document.getElementsByTagName('a');

for (var i = 0, len = links.length; i < len; i++) {
    randomiseLinks(links[i], linksList);
}

JS 小提琴演示。

以下方法具有上述函数方法的优点，但由于它扩展了Object原型，这意味着它可以直接在由document.getElementById()or document.getElementsByTagName()（以及其他）返回的元素或 nodeList 上调用：

Object.prototype.randomiseLinks = function (list) {
    var test = this.length,
        that = test ? [] : [this],
        randomNumber;
    if (test){
        for (var i = 0, len = this.length; i < len; i++){
            that[i] = this[i];
        }
    }
    for (var i = 0, len = that.length; i < len; i++){
        randomNumber = Math.floor(Math.random() * list.length);
        that[i].href = list[randomNumber].url;
        that[i].textContent = list[randomNumber].text;
    }
    return this;
};

var linksList = [{
    'url': 'http://google.com/',
    'text': 'Google.com'
}, {
    'url': 'http://stackoverflow.com/',
    'text': 'Programming Q&A'
}, {
    'url': 'http://slashdot.org/',
    'text': 'Slashdot: News for Nerds'
}];

可以如下调用：

document.getElementById('test').randomiseLinks(linksList);

或者：

document.getElementsByTagName('a').randomiseLinks(linksList);

于 2013-04-21T06:30:56.800 回答