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

Как добавить рандомное место положение?
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title> 
<link rel="stylesheet" type="text/css" media="screen" href="css/master.css" /> 
<style type="text/css"> 
#cards { 
width: 1300px; 
min-height: 150px; 
float: left; 
} 
#cards > div{ 
display: none; 
background: url('cards.png'); 
background-repeat: no-repeat; 
float: center; 
height: 143px; 
width: 100px; 
} 
#form { 
width: 100%; 
float:left; 
margin-top: 50px; 
} 
#form > div { 
float: left; 
display: block; 
width: 100%; 
} 

#rectangle { 
position: absolute; 
right: 0; 
top: 0; 
width: 100px; 
height: 100px; 
background-color: lightgreen; 
} 
</style> 
</head> 
<body> 
<center><div id="cards"></div></center>
<div id="rectangle"></div> 
<div> 
<form id="form"> 
<div> 
<p>Введите координаты</p>
 Высота <input type="number" name="top">&nbsp Ширина <input type="number" name="left"> 
</div> 
<br>
<br>
<p>Введите масть и значение</p>
<label>Масть</label> 
<select name="type"> 
<option value="0"> Хреста </option> 
<option value="1"> Бубна </option> 
<option value="2"> Чирва </option> 
<option value="3"> Пика </option> 
</select> 
&nbsp
<label>Значение</label> 
<select name="value"> 
<option value="0"> Туз </option> 
<option value="1"> 2 </option> 
<option value="2"> 3 </option> 
<option value="3"> 4 </option> 
<option value="4"> 5 </option> 
<option value="5"> 6 </option> 
<option value="6"> 7 </option> 
<option value="7"> 8 </option> 
<option value="8"> 9</option> 
<option value="9"> 10 </option> 
<option value="10"> Валет </option> 
<option value="11"> Дама </option> 
<option value="12"> Король </option> 
</select> 

<input type="submit" value="Показать">
</form> 
</div> 



<script> 
var cardsQTY = 55, 
field = document.getElementById('cards'), 
cards = '', 
counterRow = 0, 
counterCol = 0; 

for (var i=0; i < cardsQTY; i++) { 
cards += '<div data-number="'+i+'" data-col="'+ counterCol +'" data-row ="'+ counterRow +'" style="background-position-x: -' + counterRow * 98.2 + 'px;background-position-y: -' + counterCol * 143 + 'px"></div>'; 
counterRow ++; 

if (counterRow === 13) { 
counterRow = 0; 
counterCol++; 
} 
} 

function getRandomInt(min, max) { 
return Math.floor(Math.random() * (max - min + 1)) + min; 
} 

field.innerHTML = cards; 

document.querySelectorAll("[data-number='" + getRandomInt(0,cardsQTY) +"']")[0].style.display = 'block'; 

var form = document.getElementById("form"), 
nodes = document.getElementById('cards').childNodes, 
rectangle = document.getElementById('rectangle'); 

form.addEventListener("submit", function(e){ 
e.preventDefault(); 

var topCoords = form.elements['top'].value, 
leftCoords = form.elements['left'].value, 
type = form.elements['type'].value, 
value = form.elements['value'].value, 
el = document.querySelectorAll("[data-col='"+ type +"'][data-row='"+value+"']")[0]; 


for(var i=0; i<nodes.length; i++) { 
if (nodes[i].nodeName.toLowerCase() == 'div') { 
nodes[i].style.display = 'none'; 
} 
} 
css = { 
display: 'block', 
position: 'absolute', 
top: topCoords + 'px', 
left: leftCoords + 'px' 
}; 

for(i in css){ 
el.style[i] = css[i]; 
} 
}); 
for(var i=0; i<nodes.length; i++) { 
nodes[i].onmouseover = function (argument) { 
rectangle.style.background = 'red'; 
}; 
nodes[i].onmouseout = function (argument) { 
rectangle.style.background = 'lightgreen'; 
}; 
} 
</script> 
</body> 
</html>
Ответить с цитированием