我有七个文本跨度。如何设置此跨度的随机位置？我想在不重叠且不退出边缘的情况下设置随机位置。
<!DOCTYPE html>
<html lang="pl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>
.picture{
border:1px solid #000;
margin: 5px 5px 5px 5px;
position:absolute;
}
.cont {
position:relative;
background: red;
width: 300px;
height: 300px;
}
</style>
<body>
<div class="cont">
<input type="text" id="i_file1" name="i_file" class="textField">
<input type="text" id="i_file2" name="i_file" class="textField">
<input type="text" id="i_file3" name="i_file" class="textField">
<input type="text" id="i_file4" name="i_file" class="textField">
<input type="text" id="i_file5" name="i_file" class="textField">
<input type="text" id="i_file6" name="i_file" class="textField">
<input type="text" id="i_file7" name="i_file" class="textField">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<button onclick="textFields()" id="texttt"> text </button>
<button id="losuj" onclick="reset()">reset </button>
</body>
<script>
function textFields() {
$('input[type="text"]').each(function() {
var id = $(this).attr("id");
id = "#" + id;
var value1 = $(id).val();
var html_code = '<br/><br/><span class="blabla">' + value1 + '</span>';
$(id).after(html_code);
$(id).hide();
});
$("#texttt").hide();
}
function reset() {
var containerW = 300;
var containerH = 300;
$('.blabla').each(function() {
var x = parseInt(Math.random() * (containerW-$(this).width()));
var y = parseInt(Math.random() * (containerH-$(this).height()));
$(this).css({
position: 'absolute',
top: x + 'px',
left: y + 'px'
});
});
}
</script>
</html>
我现在的代码，我将位置设置为随机，但我不知道如何通过重叠来做到这一点。
最佳答案
好的，这是我的解决方案，
具有 TOP 属性:
我将 div 拆分为 (300/20) = 15 个部分——我们可以调用行
所以当第一个 span 显示时，它会取一个随机元素
in ps[] 其余得不到这个元素，rest同理
具有 LEFT 属性:
我将随机 LEFT 从 0 设置到 div 可以包含跨度的点
=> 我确保它们永远不会重叠
希望对您有所帮助!
<!DOCTYPE html>
<html lang="pl">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<style>
.picture{
border:1px solid #000;
margin: 5px 5px 5px 5px;
position:absolute;
}
.cont {
position:relative;
background: red;
width: 300px;
height: 300px;
}
</style>
<body>
<button id="losuj" onclick="random()">
Random
</button><BR><BR>
<div class="cont">
<input type="text" id="i_file1" name="i_file" class="textField">
<input type="text" id="i_file2" name="i_file" class="textField">
<input type="text" id="i_file3" name="i_file" class="textField">
<input type="text" id="i_file4" name="i_file" class="textField">
<input type="text" id="i_file5" name="i_file" class="textField">
<input type="text" id="i_file6" name="i_file" class="textField">
<input type="text" id="i_file7" name="i_file" class="textField">
</body>
<script>
function getRandomInteger(min, max) {
min = Math.floor(min);
max = Math.floor(max);
var rd = Math.floor(Math.random() * (max - min)) + min;
return rd;
}
function random() {
var ps= [];
var n = 0;
var containerW = 300;
var containerH = 300;
var spanW;
var spanH;
var first = true;
var first_H ;
var current_H ;
for(var i=0; i< 15; i++)
{
ps[i] = i;
}
$('input[type="text"]').each(function() {
if(first)
{
spanW = $(this).width();
spanH = $(this).height();
first = false
}
var x = getRandomInteger(0,containerW-spanW);
var p = getRandomInteger(0,ps.length-1);
var y = ps[p]*20;
ps.splice(p, 1);
$(this).css({
position: 'absolute',
top: y + 'px',
left: x + 'px'
});
});
}
</script>
</html>关于javascript - 带有文本的跨度的随机位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42540076/