Форум

cinedd · #1 (**permalink**) 09.06.2011, 19:11

Написал простой ColorPicker

, который отображаеться в форме квадрата 10х10. При исполнении кода генерируються buttons і помещяються в 'div' по 10 кнопок на 1 дивку.

---
for(var i=0;i<=10;++i) {
if(0 == i%1, ++i) {
var div = document.createElement("div");
div.style.clear = "both";
parent.appendChild(div);
}

var btn = new Button();
btn.render(parent);
---
Теперь хочу чтобы кнопки отображались в виде ромба, а не квадрата, но не знаю как

ksa · #2 (**permalink**) 09.06.2011, 21:38

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

хочу чтобы кнопки отображались в виде ромба

Как вариант...

<!DOCTYPE html>
<html>
<head>
<style>
.box {
	float: left;
	width: 10px;
	height: 10px;
}
.on {
	background-color: red;
}
.end {
	clear: both;
}
</style>
<script>
function Go() {
	var oc=document.getElementById('container')
	var n=17
	var k=0
	var inc=1
	var nk=Math.floor(n/2)
	var i,j,o
	for (i=0; i<n; i++) {
		for (j=0; j<n; j++) {
			o=document.createElement("div")
			o.className=(Math.abs(nk-j))>k? 'box': 'box on'
			oc.appendChild(o)
		}
		o=document.createElement("div")
		o.className='end'
		oc.appendChild(o)
		k=k+inc
		if ((k+1)>nk) inc=-1
	}
}
</script>
</head>
<body onload='Go()'>
<div id='container'></div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript