Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.11.2018, 15:40
Новичок на форуме
Отправить личное сообщение для DmitryBelg Посмотреть профиль Найти все сообщения от DmitryBelg
 
Регистрация: 09.10.2018
Сообщений: 8

Создание облака тегов на JS
Приветствую, друзья!)

Надо, значится, сделать облако тегов содержащихся в многомерном массиве. Само облако нужно поместить в уже имеющемся контейнере. С размещением тегов из массива в контейнере у меня особых проблем не возникло. Однако не могу приложить ума, как заставить меняться размер шрифта тегов в зависимости от того, сколько каждый из тегов имеет голосов (т.е. надо еще сложить между собой числа в каждом из подмассивов), цвет у тегов должен быть тоже разным.

Есть идеи, как можно решить задачу? Заранее спасибо за ответы!


Код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS PF taak: TagCloud</title>
<style media="screen" type="text/css">
<!--

}
#tagContainer {
	position:relative;
	background-color:#CFF;
	margin:1em;
	padding:0;
	width: 500px;
	height:400px;
	overflow:hidden;
	border:2px solid silver;
}
span.tag {
	position:absolute;
	top:0;
	left:0;
}
-->
</style>
<script type="text/javascript">
var arrTags = [
				["Javascript", 1634, 987],
				["jQuery", 1111, 34],
				["PHP", 1024,1122],
				["Asp.Net", 977, 1005],
				["Photoshop", 594, 789],
				["XML", 40, 666],
				["Access", 55, 77],
				["Java", 278, 277],
				["MySQL", 155, 122]
			   ]

window.onload = function () {
    var tagCont = document.getElementById('tagContainer');
    for (var i = 0; i < arrTags.length; i++){
        var eSpan = document.createElement('span');
        eSpan.className = "tag";
        
        var x = Math.floor(Math.random()*250);
        var y = Math.floor(Math.random()*250);
        eSpan.style.left = x +'px';
        eSpan.style.top = y +'px';
        eSpan.innerHTML = arrTags[i][0];
        tagCont.appendChild(eSpan);
    }
}

</script>
</head>
<body>
<div id="tagContainer"></div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 05.11.2018, 16:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,661

DmitryBelg,
в чём проблема сделать цикл и сложить всё что нужно заранее?
Ответить с цитированием
  #3 (permalink)  
Старый 05.11.2018, 16:26
Новичок на форуме
Отправить личное сообщение для DmitryBelg Посмотреть профиль Найти все сообщения от DmitryBelg
 
Регистрация: 09.10.2018
Сообщений: 8

числа я сложил.
код теперь выглядит вот так:

var arrTags = [
				["Javascript", 1634, 987],
				["jQuery", 1111, 34],
				["PHP", 1024,1122],
				["Asp.Net", 977, 1005],
				["Photoshop", 594, 789],
				["XML", 40, 666],
				["Access", 55, 77],
				["Java", 278, 277],
				["MySQL", 155, 122]
			   ]


window.onload = function () {
    var tagCont = document.getElementById('tagContainer');
    for (var i = 0; i < arrTags.length; i++){
        arrTags[i][1] = arrTags[i][1]+arrTags[i][2];
        console.log(arrTags[i][1]);
        var eSpan = document.createElement('span');
        eSpan.className = "tag";
        var x = Math.floor(Math.random()*250);
        var y = Math.floor(Math.random()*250);
        eSpan.style.left = x +'px';
        eSpan.style.top = y +'px';
        eSpan.innerHTML = arrTags[i][0];
        tagCont.appendChild(eSpan);
    }
}


Но как теперь заставить шрифт подгоняться под полученные значения, я не знаю.
Ответить с цитированием
  #4 (permalink)  
Старый 05.11.2018, 16:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,661

DmitryBelg,
общую сумму голосов нужно точно? может только первое число?
Ответить с цитированием
  #5 (permalink)  
Старый 05.11.2018, 16:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,661

DmitryBelg,
в строке 15 отсортируйте массив и потом
eSpan.style.fontSize = (12 + i * 2.3) + 'px';
Ответить с цитированием
  #6 (permalink)  
Старый 05.11.2018, 16:42
Аватар для MC-XOBAHCK
Профессор
Отправить личное сообщение для MC-XOBAHCK Посмотреть профиль Найти все сообщения от MC-XOBAHCK
 
Регистрация: 06.08.2017
Сообщений: 413

А что эти числа означают? За-против? Тогда наверное вычитать нужно а не складывать.
Ответить с цитированием
  #7 (permalink)  
Старый 05.11.2018, 16:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,661

DmitryBelg,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS PF taak: TagCloud</title>
<style>
#tagContainer {
    position:relative;
    background-color:#FFE4E1;
    margin:1em;
    padding:0;
    width: 500px;
    height:400px;
    overflow:hidden;
    border:2px solid silver;
}
span.tag {
    position:absolute;
    top:0;
    left:0;
    text-shadow: 5px 1px 3px #FFFAFA;
     font-weight: 400;
}
</style>
<script>
var arrTags = [
    ["Javascript", 1634, 987],
    ["jQuery", 1111, 34],
    ["PHP", 1024, 1122],
    ["Asp.Net", 977, 1005],
    ["Photoshop", 594, 789],
    ["XML", 40, 666],
    ["Access", 55, 77],
    ["Java", 278, 277],
    ["MySQL", 155, 122]
];
window.onload = function() {
    var tagCont = document.getElementById("tagContainer");

    function sum(el) {
        return el[1] + el[2]
    }
    var obj = arrTags.reduce(function(a, b) {
        b = sum(b);
        if (a.min > b) a.min = b;
        if (a.max < b) a.max = b;
        return a
    }, {
        max: sum(arrTags[0]),
        min: sum(arrTags[0])
    });
    for (var i = 0; i < arrTags.length; i++) {
        var eSpan = document.createElement("span");
        eSpan.className = "tag";
        var font = 12 + 52 * (arrTags[i][1] - obj.min) / (obj.max - obj.min);
        var x = Math.floor(Math.random() * 250);
        var y = Math.floor(Math.random() * 250);
        eSpan.style.fontSize = font + "px";
        eSpan.style.left = x + "px";
        eSpan.style.top = y + "px";
        eSpan.style.color = "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
        eSpan.innerHTML = arrTags[i][0];
        tagCont.appendChild(eSpan)
    }
};
</script>
</head>
<body>
<div id="tagContainer"></div>
</body>
</html>
Ответить с цитированием
  #8 (permalink)  
Старый 05.11.2018, 16:57
Новичок на форуме
Отправить личное сообщение для DmitryBelg Посмотреть профиль Найти все сообщения от DmitryBelg
 
Регистрация: 09.10.2018
Сообщений: 8

Сообщение от рони Посмотреть сообщение
DmitryBelg,
общую сумму голосов нужно точно? может только первое число?
Да, точно) Это голоса. Я из условия задания сразу и не понял о чем речь!)
Ответить с цитированием
  #9 (permalink)  
Старый 05.11.2018, 16:59
Новичок на форуме
Отправить личное сообщение для DmitryBelg Посмотреть профиль Найти все сообщения от DmitryBelg
 
Регистрация: 09.10.2018
Сообщений: 8

воууу)) блин) я аж подавился, когда увидел результат) Сейчас буду вникать.
Спасибо в очередной раз тебе и все остальным, кто не прошел мимо)
Ответить с цитированием
  #10 (permalink)  
Старый 05.11.2018, 17:04
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,661

DmitryBelg,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JS PF taak: TagCloud</title>
<style>
#tagContainer {
    position:relative;
    background-color:#FFE4E1;
    margin:1em;
    padding:0;
    width: 500px;
    height:400px;
    overflow:hidden;
    border:2px solid silver;
}
span.tag {
    position:absolute;
    top:0;
    left:0;
    text-shadow: 5px 1px 3px #FFFAFA;
     font-weight: 400;
}
</style>
<script>
var arrTags = [
    ["Javascript", 1634, 987],
    ["jQuery", 1111, 34],
    ["PHP", 1024, 1122],
    ["Asp.Net", 977, 1005],
    ["Photoshop", 594, 789],
    ["XML", 40, 666],
    ["Access", 55, 77],
    ["Java", 278, 277],
    ["MySQL", 155, 122]
];
window.onload = function() {
    var tagCont = document.getElementById("tagContainer");

    function sum(el) {
        return el[1] + el[2]
    }
    arrTags.sort(function(a, b) {
     return sum(a) - sum(b)
    });
    for (var i = 0; i < arrTags.length; i++) {
        var eSpan = document.createElement("span");
        eSpan.className = "tag";
        var font = 12 + (i * i);
        var x = Math.floor(Math.random() * 250);
        var y = Math.floor(Math.random() * 250);
        eSpan.style.fontSize = font + "px";
        eSpan.style.left = x + "px";
        eSpan.style.top = y + "px";
        eSpan.style.color = "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6);
        eSpan.innerHTML = arrTags[i][0];
        tagCont.appendChild(eSpan)
    }
};
</script>
</head>
<body>
<div id="tagContainer"></div>
</body>
</html>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пример тестовых заданий на js junior elshaarawy Учебные материалы 3 26.03.2015 14:17
JS Coaching для стартапа OlgaAyva Работа 12 27.09.2011 21:18
Картинка обрабатывается js 4yBaK Общие вопросы Javascript 10 11.09.2011 08:28
создание файла с помощью JS Bebarr Swallow Общие вопросы Javascript 1 14.06.2011 03:57