Информация к новости
  • Просмотров: 571
  • Автор: sulicompany
  • Дата: 15-07-2012, 21:42
 (голосов: 0)
15-07-2012, 21:42

Статистика друзей: девушки, парни

Категория: Программирование » VK (Вконтакте)


В этом уроке показано:
- как узнать список друзей
- разделение друзей на девушки, парни и не указавшие пол
- вывод аватарок друзей
- использование одной функции для правильных окончаний разных слов (1 подруга, 2 друга)
- использование изображения прелоадера




code.js

  1.  
  2. $(document).ready(function(){
  3.     VK.init(function() {
  4.     // выполняем запрос получения списка друзей
  5.     VK.api("getFriends"{fields:"sex,photo"}function(data) {
  6.         // узнаем количество друзей
  7.         var frCount = data.response.length;
  8.  
  9.         var girlsCount = 0;
  10.         var boysCount = 0;
  11.         var someCount = 0;
  12.        
  13.         var girlsStr = ''// девушки
  14.         var boysStr = ''// парни
  15.         var someStr = ''// не указан пол
  16.        
  17.         // массивы форм слов
  18.         var friendsEnd = ['друзей','друг','друга'];
  19.         var girlsEnd = ['подруг','подруга','подруги'];
  20.        
  21.         for (var i=0; i<frCount; i++) {
  22.             if (data.response[i].sex == 1) { // если девушка
  23.                 girlsCount++;
  24.                 girlsStr += '<a href="http://vkontakte.ru/id' + data.response[i].uid + '" title="' + data.response[i].first_name + ' ' + data.response[i].last_name + '"><img src="' + data.response[i].photo + '" /></a>';
  25.             } else if (data.response[i].sex == 2) {
  26.                     boysCount++;
  27.                     boysStr += '<a href="http://vkontakte.ru/id' + data.response[i].uid + '" title="' + data.response[i].first_name + ' ' + data.response[i].last_name + '"><img src="' + data.response[i].photo + '" /></a>';
  28.                 } else {
  29.                     someCount++;
  30.                     someStr += '<a href="http://vkontakte.ru/id' + data.response[i].uid + '" title="' + data.response[i].first_name + ' ' + data.response[i].last_name + '"><img src="' + data.response[i].photo + '" /></a>';
  31.                 }
  32.         }
  33.  
  34.         $("#totalCount").html('У вас ' + frCount + ' ' + num_ending(frCount,friendsEnd));
  35.         $("#girlsCount").html(girlsCount + ' ' + num_ending(girlsCount,girlsEnd));
  36.         $("#girls").html(girlsStr);
  37.         $("#boysCount").html(boysCount + ' ' + num_ending(boysCount,friendsEnd));
  38.         $("#boys").html(boysStr);
  39.         $("#someCount").html(someCount + ' ' + num_ending(someCount,friendsEnd)' - не указали пол');
  40.         $("#some").html(someStr);      
  41.         // скрываем прелоадер
  42.         $('#loader').fadeOut(1000);
  43.     });
  44.     });
  45. });
  46.  
  47.  
  48. // функция формирования правильных окончаний слов
  49. // number - число, endings - массив окончаний, состоящий из 3х форм: 'друзей','друг','друга'
  50. function num_ending(number,endings) {
  51.     var num100 = number % 100;
  52.     var num10 = number % 10;
  53.     if (num100 >= 5 && num100 <= 20) {
  54.         return endings[0];
  55.     } else if (num10 == 0) {
  56.         return endings[0];
  57.     } else if (num10 == 1) {
  58.         return endings[1];
  59.     } else if (num10 >= 2 && num10 <= 4) {
  60.         return endings[2];
  61.     } else if (num10 >= 5 && num10 <= 9) {
  62.         return endings[0];
  63.     } else {
  64.         return endings[2];
  65.     }
  66. }
  67.  



index.html

  1.  src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
  2.  src="js/code.js" type="text/javascript"></script>
  3.  rel="stylesheet" href="css/style.css" type="text/css" />
  4.  src="http://vkontakte.ru/js/api/xd_connection.js?2"type="text/javascript"></script>
  5.  
  6. </head>
  7.  id="loader"> src="http://vk.com/images/upload.gif" alt="" width="32"height="8" border="0" /></div>
  8.  
  9.  id="totalCount"></div>
  10.  
  11.  id="girlsCount"></div>
  12.  id="girls"></div>
  13.  
  14.  
  15.  id="boysCount"></div>
  16.  id="boys"></div>
  17.  
  18.  id="someCount"></div>
  19.  id="some"></div>
  20.  
  21.  />
  22.  href="http://flapps.ru/" target="_blank"></a>
  23.  
  24. </body>
  25. </html>



style.css

  1. body {
  2.     padding:0;
  3.     margin:0;
  4.     font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
  5.     font-size11px;
  6. }
  7.  
  8. #girls img, #boys img, #some img{
  9.     padding:0;
  10.     margin:0;
  11. }
  12. #totalCount,
  13. #girlsCount#girls,
  14. #boysCount#boys,
  15. #someCount#some {
  16.     display:block;
  17.     clear:both;
  18. }
  19. #totalCount#girls#boys#some {
  20.     margin-bottom:20px;
  21. }
  22.  
  23. /* изображение прелоадер */
  24. #loader {
  25.     width100%;
  26.     height100%;
  27.     positionfixed;
  28.     text-aligncenter;
  29.     z-index1000;
  30.     background-color#fff;
  31.     opacity: 0.80;
  32. }
  33.  
  34. #loader img{
  35.     positionabsolute;
  36.     left50%;
  37.     top50%;
  38.     margin: -40px 0 0 -40px;
  39. }



Приложение должно быть включено.
Состояние: Приложение включено и видно всем.

Исходник: http://flapps.ru/example/friends_get_girls_boys.rar