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

HTML/CSS - How to set text (e.g. 'Quote of the Day') to change automatically on page load/reload?

本文关键字：加载 新加载 of CSS 置文本 the HTML Quote 例如 Day      更新时间：2023-09-26

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

我需要在文件中保存引号列表吗?他们能从网站/在线列表中被拉出来吗?最有效的方法是什么?

谢谢

有一个名为Forismatic的免费引用和表达式API，它可以检索随机的鼓舞人心的引用或表达式。查看这里的引用示例。

我使用JQuery与AJAX和Bootstrap创建了这个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

您可以使用Math.random()来获得随机索引。Math.random()的取值范围为0(含)~ 1(不含)。

每次加载页面时都会调用onload。

<!DOCTYPE html>
<html>
<body onload="randomQuotes()">
    <h1>Hello World!</h1>
    <p id="quote"></p>
    <script>
    var quotes = ['hi', 'bye', 'lol', 'hello', 'world']
    function randomQuotes() {
        var idx = Math.floor(Math.random() * quotes.length)
        document.getElementById('quote').innerHTML = quotes[idx]
    }
    </script>
</body>

相关文章：