JavaScript - Math.floor(Math.random()) - 重新定位元素

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript - Math.floor(Math.random()) - 重新定位元素相关的知识,希望对你有一定的参考价值。

我正在尝试开发一个随机重新定位Web文档元素的函数。我当前的javascript程序不会随机更改元素id =“image”的element.style.left和element.style.top值。谢谢你的帮助!

<html> <body>

<img id="image" src="happy.jpg" style="position:absolute;left:0px; 
top:0px; width:50px; height:50px;" />

<button onclick="RandomPositions()"> Random Position </button>

<script>
 function RandomPositions() {
    var Hero = document.getElementById("image");
    var x = Math.floor(Math.random() * 300);
    var HeroX = Hero.style.left;
    HeroX = x + 'px';
    var y = Math.floor(Math.random() * 300);
    var HeroY = Hero.style.top; 
    HeroY = y + 'px';
 }
</script>
</body>
</html>
答案

我建议只使用元素本身,因为你有一个原始值(字符串)作为参考,而不是对样式的引用。

 function RandomPositions() {
    var Hero = document.getElementById("image");
    var x = Math.floor(Math.random() * 300);
    var y = Math.floor(Math.random() * 300);
    Hero.style.top = y + 'px';
    Hero.style.left = x + 'px';       
 }
<img id="image" src="http://lorempixel.com/75/75/" style="position:absolute;left:0px; 
top:0px; width:50px; height:50px;" />
<button onclick="RandomPositions()"> Random Position </button>
另一答案

删除HeroX和HeroY变量。更改这些变量时,图像样式不会更改。

function RandomPositions() {
    var Hero = document.getElementById("image");
    var x = Math.floor(Math.random() * 300);
    Hero.style.left = x + 'px';
    var y = Math.floor(Math.random() * 300);
    Hero.style.top = y + 'px';
 }
另一答案
var Hero = document.getElementById("image");
var x = Math.floor(Math.random() * 300);
Hero.style.left = x +'px';
另一答案

它的工作原理如下:

var Hero = document.getElementById("image");
var x = Math.floor(Math.random() * 300);
Hero.style.left = x +'px';
另一答案

您必须将变量分配给新对象。

将此添加到您的代码中。

Hero.style.left = HeroY;
Hero.style.left = HeroX;

无论如何,img正在Y轴上移动。

以上是关于JavaScript - Math.floor(Math.random()) - 重新定位元素的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript Math.floor方法(对数值向下取整)

javascript 随机数 与高级应用 附vbscript(asp) 随机数总结

Javascript Math ceil()floor()round()三个函数的区别

Javascript Math.ceil()与Math.round()与Math.floor()区别

JavaScript - Math.floor(Math.random()) - 重新定位元素

Math.floor是啥?