html - 如何在每次加载页面时更改 html 页面的一部分

Question

我正在寻找一种在每次加载页面时更改一段 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，所以我不太擅长这种事情。我试过在谷歌上搜索，但我不知道要搜索什么。

Answer 1

实现你想要的最简单的方法，记住这种动态行为需要客户端( javascript )或服务器端( ruby ， php 等)解决方案，是以下方法:

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 Fiddle demo .

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

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 Fiddle demo .

还有一个稍微更复杂的方法(尽管此时它变得更易于维护)方法是开始使用可以在多个元素上调用的函数:

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 Fiddle demo .

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

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