随机放置5个div
[英]Position 5 divs randomly
问题描述
I'm completely stuck here. 
我完全被困在这里。 I'm trying to create a program where i have 5 different divs. 我正在尝试创建一个有5个不同div的程序。 They need to be placed at random position when running the program. 在运行程序时，需要将它们放置在随机位置。 And they need to switch position when i drag my mouse over them. 当我将鼠标拖到它们上方时，它们需要切换位置。 So far i've done this. 到目前为止，我已经做到了。 (which is completely wrong). （完全错误）。
function Init()
{
div = document.getElementById("pixel");
div = document.getElementById("pixel1");
div = document.getElementById("pixel2");
div = document.getElementById("pixel3");
div = document.getElementById("pixel4");
spaceW = screen.height - div.height;
spaceH = screen.width - div.width;
setTimeout(moveIt, 0);
}
function moveIt()
{
div.style.top = (100*Math.random()) + "%";
div.style.left = (100*Math.random()) + "%";
}
<body onload="Init()">
<div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"/>
<div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"/>
</body>
Can someone nudge me in the right direction because this clearly doesn't work. 有人可以按正确的方向推动我，因为这显然行不通。
2 个解决方案
解决方案1
1 2018-01-21 13:02:08
check out after fix some syntax error like Pal Singh mention AND 修复某些语法错误（如Pal Singh提及）后检查
- add all div(s) to one array so can be easy to control it 将所有div添加到一个数组中，以便于控制
- add [ getRandomNum() , percentwidth() , percentHeight() ] functions to keep div(s) in page 添加[ getRandomNum（），percentwidth（），percentHeight（） ]函数以将div保留在页面中
- add moveIt() function to do some animation when move 添加moveIt（）函数在移动时做一些动画
function RandomIt() { var div_array = []; div_array.push(document.getElementById("pixel")); div_array.push(document.getElementById("pixel1")); div_array.push(document.getElementById("pixel2")); div_array.push(document.getElementById("pixel3")); div_array.push(document.getElementById("pixel4")); div_array.forEach(function(entry) { moveIt(entry,getRandomNum(1,100 - percentwidth(entry)),getRandomNum(1,100 - percentwidth(entry))) }); } function getRandomNum(min, max) { return Math.random() * (max - min) + min; } function percentwidth(elem){ return ((elem.offsetWidth/window.innerWidth)*100).toFixed(2); } function percentHeight(elem){ return ((elem.offsetHeight/window.innerHeight)*100).toFixed(2)+'%'; } function moveIt(elem,target_x,target_y) { var pos_x = 0; var pos_y = 0; var id = setInterval(frame, 5); function frame() { if (pos_x == target_x && pos_y == target_y) { clearInterval(id); } else { if(pos_x < target_x){ pos_x++; elem.style.left = pos_x + '%'; } if(pos_y < target_y){ pos_y ++; elem.style.top = pos_y + '%'; } } } }
<body onload="RandomIt()"> <button onclick="RandomIt()">RandomIt</button> <div id="pixel" style="background-color:blue; position:fixed; height:50px; width:50px; font-size:25px;"></div> <div id="pixel1" style="background-color:green; position:fixed; height:50px; width:50px; font-size:25px;"></div> <div id="pixel2" style="background-color:orange; position:fixed; height:50px; width:50px; font-size:25px;"></div> <div id="pixel3" style="background-color:yellow; position:fixed; height:50px; width:50px; font-size:25px;"></div> <div id="pixel4" style="background-color:red; position:fixed; height:50px; width:50px; font-size:25px;"></div> </body>
解决方案2
0 已采纳 2018-01-21 12:22:09
I've added your code to fiddle: https://jsfiddle.net/x05b5suz/2/ 我已将您的代码添加到小提琴中： https : //jsfiddle.net/x05b5suz/2/
Few things I would like to tell you: 我想告诉您的几件事：
div = document.getElementById("pixel");
div = document.getElementById("pixel1"); // This is wrong
div = document.getElementById("pixel2");
You should declare your variable with var keyword and their name should be unique in a scope of a function otherwise you are just overwriting them. 您应该使用var关键字声明变量，并且它们的名称在函数范围内应该是唯一的，否则您将覆盖它们。 So you can name them var div1 , var div2 so on. 因此，您可以将它们命名为var div1 ， var div2等等。
In HTML, you need to close your <div>...</div> tags, div are not supposed to be quick closed. 在HTML中，您需要关闭<div>...</div>标签，不应快速关闭div。
I hope this helps 我希望这有帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.