0

ページが読み込まれるたびに html のセクションを変更する方法を探しています。

例。

私は3つのリンクを持っています:

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

これを行う方法はありますか？もしかしてジャバスクリプト？私はhtmlしか知らないので、この種のことはあまり得意ではありません。Googleで検索してみましたが、何を検索すればよいかわかりません。

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 フィドルのデモ。

次のアプローチには、上記の機能的アプローチの利点がありますが、プロトタイプを拡張するため、 or (とりわけ)Objectによって返される要素または nodeList で直接呼び出すことができることを意味します。document.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);

于 2013-04-21T06:30:56.800 に答える