web-dev-qa-db-de.com

Verwenden Sie Javascript, um ein zufälliges Bild von Google-Bildern zu erhalten

Ich habe diese Idee für meine Website, dass der Hintergrund jedes Mal anders ist, wenn Sie die Seite besuchen. Ich möchte ein beliebiges Bild von Google-Bildern erhalten und es mit Javascript als Hintergrund meiner Website einfügen.

Grundsätzlich holt ein Skript bei jeder Aktualisierung der Seite ein zufälliges Bild aus Google-Bildern und legt es als Hintergrund ab oder lädt es zumindest herunter.

Wie mache ich das oder ist es überhaupt möglich?

17
htmlcoder123

Dies kann über Google Images erfolgen, auch wenn viele Anpassungen erforderlich sind, damit sich das Skript wie gewünscht verhält (einschließlich der Einrichtung einer Verzögerung für die Begrenzung der Geschwindigkeit; Google hat eine Begrenzung auf 64 Elemente pro Suchanforderung über die API) Beispiel mit Google Images API:

<html>
<head>
    <title></title>
    <script src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load('search', '1');
    google.setOnLoadCallback(OnLoad);
    var search;

    //i suggest instead of this to make keywords list so first to pick random keyword than to do search and pick random image
    var keyword = 'mountains';

    function OnLoad()
    {
        search = new google.search.ImageSearch();

        search.setSearchCompleteCallback(this, searchComplete, null);

        search.execute(keyword);
    }

    function searchComplete()
    {
        if (search.results && search.results.length > 0)
        {
            var rnd = Math.floor(Math.random() * search.results.length);

            //you will probably use jQuery and something like: $('body').css('background-image', "url('" + search.results[rnd]['url'] + "')");
            document.body.style.backgroundImage = "url('" + search.results[rnd]['url'] + "')";
        }
    }
    </script>
</head>
<body>

</body>
</html>

Ich kann jedoch stattdessen vorschlagen: Zufällige Bilder von flickr , hier ist ein weiterer grundlegender Code dafür (Himmel ist das Limit):

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">

    var keyword = "mountains";

    $(document).ready(function(){

        $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
        {
            tags: keyword,
            tagmode: "any",
            format: "json"
        },
        function(data) {
            var rnd = Math.floor(Math.random() * data.items.length);

            var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");

            $('body').css('background-image', "url('" + image_src + "')");

        });

    });
    </script>
</head>
<body>

</body>
</html>
23
Sinisa Bobic

auch wenn dies nicht technisch gesehen ist, könnte dies helfen, dem Zufall etwas Struktur zu verleihen - Sie könnten ein paar Wörterbücher, Verben, Substantive, Adjektive usw. zusammenstellen. fette Bulldogge läuft), dann Google mit dieser Suche abfragen und ein zufälliges Bild aus den Ergebnissen auswählen. Auf diese Weise können Sie möglicherweise die unangemessenen Ergebnisse reduzieren und außerdem die Auswahl bestimmter Wörterbücher auf der Grundlage von Themen zulassen, die der Benutzer möglicherweise ausgewählt hat. (dh die verfügbaren Substantive werden basierend auf den Vorlieben des Benutzers geändert)

0
Neil Loftin