Вконтакте

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

В этом уроке показано:

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



code.js

$(document).ready(function(){
    VK.init(function() {
    // выполняем запрос получения списка друзей
    VK.api("getFriends", {fields:"sex,photo"}, function(data) {
        // узнаем количество друзей
        var frCount = data.response.length;
 
        var girlsCount = 0;
        var boysCount = 0;
        var someCount = 0;
 
        var girlsStr = ''; // девушки
        var boysStr = ''; // парни
        var someStr = ''; // не указан пол
 
        // массивы форм слов
        var friendsEnd = ['друзей','друг','друга'];
        var girlsEnd = ['подруг','подруга','подруги'];
 
        for (var i=0; i<frCount; i++) {
            if (data.response[i].sex == 1) { // если девушка
                girlsCount++;
                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>';
            } else if (data.response[i].sex == 2) {
                    boysCount++;
                    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>';
                } else {
                    someCount++;
                    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>';
                }
        }
        $("#totalCount").html('У вас ' + frCount + ' ' + num_ending(frCount,friendsEnd));
        $("#girlsCount").html(girlsCount + ' ' + num_ending(girlsCount,girlsEnd));
        $("#girls").html(girlsStr);
        $("#boysCount").html(boysCount + ' ' + num_ending(boysCount,friendsEnd));
        $("#boys").html(boysStr);
        $("#someCount").html(someCount + ' ' + num_ending(someCount,friendsEnd) + ' - не указали пол');
        $("#some").html(someStr);
        // скрываем прелоадер
        $('#loader').fadeOut(1000);
    });
    });
});
 
// функция формирования правильных окончаний слов
// number - число, endings - массив окончаний, состоящий из 3х форм: 'друзей','друг','друга'
function num_ending(number,endings) {
    var num100 = number % 100;
    var num10 = number % 10;
    if (num100 >= 5 && num100 <= 20) {
        return endings[0];
    } else if (num10 == 0) {
        return endings[0];
    } else if (num10 == 1) {
        return endings[1];
    } else if (num10 >= 2 && num10 <= 4) {
        return endings[2];
    } else if (num10 >= 5 && num10 <= 9) {
        return endings[0];
    } else {
        return endings[2];
    }
}

index.html 
<html>
<head>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/code.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="http://vkontakte.ru/js/api/xd_connection.js?2" type="text/javascript"></script>
</head>
 
<body>
<div id="loader"><img src="http://vk.com/images/upload.gif" alt="" width="32" height="8" border="0" /></div>
<div id="totalCount"></div>
<div id="girlsCount"></div>
<div id="girls"></div>
<div id="boysCount"></div>
<div id="boys"></div>
 
<div id="someCount"></div>
<div id="some"></div>
</body>
</html>

style.css
body {
    padding:0;
    margin:0;
    font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
    font-size: 11px;
}
 
#girls img, #boys img, #some img{
    padding:0;
    margin:0;
}
 
#totalCount,#girlsCount, #girls,#boysCount, #boys,#someCount, #some {
    display:block;
    clear:both;
}
 
#totalCount, #girls, #boys, #some {
    margin-bottom:20px;
}
 
/* изображение прелоадер */
#loader {
    width: 100%;
    height: 100%;
    position: fixed;
    text-align: center;
    z-index: 1000;
    background-color: #fff;
    opacity: 0.80;
}
 
#loader img{
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -40px 0 0 -40px;
}

Приложение должно быть включено. Состояние: Приложение включено и видно всем.
Теги:
ВКонтакте API
Похожие новости:
Добавлено: 16 Августа 2013 10:37:11 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...