javascript - HTML/CSS - 如何将文本(例如 'Quote of the Day' )设置为在页面加载/重新加载时自动更改？

Question

我对 HTML/CSS 很陌生。我有一个相当基本的网站，在我的标题下有一个有趣的引用。我的 friend 问我每次加载页面时它是否都会改变，这让我产生了做类似事情的想法。我想知道是否有任何方法可以在 HTML/CSS 中管理它。我确实懂一些 Javascript，所以如果需要我也可以用它来做。

我需要一份保存在文件中的引述列表吗？可以从网站/在线列表中提取它们吗？最有效的方法是什么？

谢谢

Answer 1

有一个名为 Forismatic 的免费报价和表达式 API它检索随机鼓舞人心的引语或表达。 See here for an example quote .

我使用带有 AJAX 和 Bootstrap 的 JQuery 创建了此 API 的示例代码笔:

<script>
    $(function() {
        var quote = $('.quote-text');
        getQuote(quote);
        $('#getQuote').click(function(event) {
            event.preventDefault();
            getQuote(quote);
        });
    });

    function getQuote(quote) {
        var url = 'http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?';
        $.getJSON(url, function(data) {
            quote.html(data.quoteText);
        });
    }
</script>

<div class="jumbotron text-center">
    <p class="quote-text"></p>
    <button id="getQuote" class="btn">Get Quote</button>
</div>

您可以在此处查看代码笔 - http://codepen.io/jamesg1/pen/zKORbk