Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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>
Ответить с цитированием
  #2 (permalink)  
Старый 13.11.2015, 10:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,108

злобная_пипа,
var topCoords = form.elements['top'].value||getRandomInt(0, 500),
leftCoords = form.elements['left'].value||getRandomInt(0, 500),

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

Работает только когда вывожу определенную карту.
Но все равно спасибо)

Последний раз редактировалось злобная_пипа, 13.11.2015 в 16:46.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить объект в панораму 360 с использованием Three.js? protexon Общие вопросы Javascript 0 29.10.2015 12:21
Как добавить объект в панораму 360 с использованием Three.js? protexon Элементы интерфейса 0 28.10.2015 20:57
как добавить еще один селектор foxfor jQuery 1 29.05.2015 12:32
Как сделать так чтобы в место value использовать url чтобы картинка менялось через зн sarik Общие вопросы Javascript 9 22.02.2013 13:24
Как добавить методы объекту после конструирования. DragorWW Общие вопросы Javascript 23 21.01.2013 20:39