Question

我完全被困在这里。我试图创建一个程序，我有5个不同的div。在运行程序时，它们需要放在随机位置。当我将鼠标拖过它们时，它们需要切换位置。到目前为止，我已经做到了这一点。（这是完全错误的）。

   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>

有人可以把我推向正确的方向，因为这显然不起作用。

Answer 1

修复 Pal Singh 提及的语法错误后，

检查和

将所有div添加到一个数组中，以便于控制它
添加[ getRandomNum（），percentwidth（），percentHeight（）]函数以保留页面中的div
添加 moveIt（）功能，以便在移动时执行一些动画

＆＃13;

	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 + '%';
			}
	      
	       
	    }
	  }
   }

＆＃13;

<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>

＆＃13;

Answer 2

我已将您的代码添加到小提琴中：https://jsfiddle.net/x05b5suz/2/

我想告诉你几件事：

div = document.getElementById("pixel");
div = document.getElementById("pixel1"); // This is wrong
div = document.getElementById("pixel2");

您应该使用var关键字声明您的变量，并且它们的名称在函数范围内应该是唯一的，否则您只是覆盖它们。因此，您可以将它们命名为var div1，var div2等。

在HTML中，您需要关闭<div>...</div>标记，div不应该快速关闭。

我希望这会有所帮助

位置5随机div

2 个答案: