Форум

DmitryBelg · #1 (**permalink**) 05.11.2018, 16:40

Приветствую, друзья!)

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

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

Код:

<!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, 17:02

DmitryBelg,
в чём проблема сделать цикл и сложить всё что нужно заранее?

DmitryBelg · #3 (**permalink**) 05.11.2018, 17:26

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

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, 17:35

DmitryBelg,
общую сумму голосов нужно точно? может только первое число?

рони · #5 (**permalink**) 05.11.2018, 17:40

DmitryBelg,
в строке 15 отсортируйте массив и потом
eSpan.style.fontSize = (12 + i * 2.3) + 'px';

MC-XOBAHCK · #6 (**permalink**) 05.11.2018, 17:42

А что эти числа означают? За-против? Тогда наверное вычитать нужно а не складывать.

рони · #7 (**permalink**) 05.11.2018, 17:55

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>

DmitryBelg · #8 (**permalink**) 05.11.2018, 17:57

Сообщение от рони

DmitryBelg,
общую сумму голосов нужно точно? может только первое число?

Да, точно) Это голоса. Я из условия задания сразу и не понял о чем речь!)

DmitryBelg · #9 (**permalink**) 05.11.2018, 17:59

воууу)) блин) я аж подавился, когда увидел результат) Сейчас буду вникать.
Спасибо в очередной раз тебе и все остальным, кто не прошел мимо)

рони · #10 (**permalink**) 05.11.2018, 18:04

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>

Форум

Справочник

Discord чат

Курсы javascript