2015-09-16 18 views
11

Tôi có ý tưởng này cho trang web của mình rằng mỗi khi bạn truy cập trang, nền sẽ khác. Tôi muốn có được bất kỳ hình ảnh nào từ hình ảnh của Google và đặt nó làm nền của trang web của tôi bằng cách sử dụng Javascript.Sử dụng javascript để lấy một hình ảnh ngẫu nhiên từ các hình ảnh của Google

Về cơ bản mỗi lần bạn làm mới trang, tập lệnh sẽ tìm nạp một hình ảnh ngẫu nhiên từ hình ảnh của Google và đặt nó làm nền hoặc có thể ít nhất là tải xuống hình ảnh.

Tôi nên làm như thế nào hoặc thậm chí có thể thực hiện được không?

+0

Đó không phải là đặc biệt khả thi. – SLaks

+1

Bạn có thể sử dụng một dịch vụ thực hiện điều này cho bạn như [lorempixel] (http://lorempixel.com/), nhưng tôi không chắc liệu điều này có phù hợp với nhu cầu của bạn hay không. Mặc dù, nhận được một bức ảnh * ngẫu nhiên * thực sự từ Google Images có vẻ nhiều hơn một chút rủi ro, với số lượng ảnh trên đó không phù hợp với nguồn gốc của trang web. – Scott

+1

Bạn sẽ cần phải sử dụng [Google Image Search API] (https://developers.google.com/image-search/v1/jsondevguide?hl=en) để truy vấn hình ảnh, sau đó bạn có thể nhận được một biểu mẫu kết quả ngẫu nhiên dữ liệu JSON. Lưu ý rằng nó không được dùng nữa, nhưng vẫn hoạt động. Bạn cũng có thể sử dụng [API tìm kiếm tùy chỉnh mới hơn] của họ (https://developers.google.com/custom-search/). –

Trả lời

15

Có thể thực hiện qua Google Images mặc dù cần phải tùy chỉnh nhiều để kịch bản hoạt động như bạn dự định (bao gồm thiết lập độ trễ để xử lý giới hạn tốc độ; Google có giới hạn tốc độ 64 mục cho mỗi yêu cầu tìm kiếm qua API) đây là một ví dụ cơ bản sử dụng 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> 

Tuy nhiên tôi có thể đề nghị thay vì: hình ảnh ngẫu nhiên từ flickr, đây là một mã cơ bản cho điều đó (bầu trời là giới hạn):

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

Làm đẹp! .... điều này đã giúp tôi tiết kiệm rất nhiều thời gian để bắt đầu. – Simon

Các vấn đề liên quan