Question

我让这个div元素在鼠标点击时移动到一个随机位置，但是它并不尊重整个屏幕的宽度和高度而且它离开它使得点击它非常不合适。我希望它将屏幕高度和宽度变为“考虑”，因此它不会超出页面。我也希望div获得随机大小，每次从固定的更高大小开始点击它，并使始终更低。最后，每次点击都会获得随机颜色。

HTML：

<div id="test">test div</div>

的CSS：

#test {
    position:absolute;
    width:100px;
    height:70px;
    background-color:#d2fcd9;
}

jQuery的：

$('#test').click(function() {
    var docHeight = $(document).height(),
        docWidth = $(document).width(),
        $div = $('#test'),
        divWidth = $div.width(),
        divHeight = $div.height(),
        heightMax = docHeight - divHeight,
        widthMax = docWidth - divWidth;
    $div.css({
        left: Math.floor( Math.random() * widthMax ),
        top: Math.floor( Math.random() * heightMax )
    });
});

Answer 1

您可以采用window宽度和高度而不是document尺寸，文档尺寸可以大于窗口尺寸。

要在每次点击时获得随机大小，您应该与位置基本相同。

width: Math.floor(Math.random() * divWidth),
height: Math.floor(Math.random() * divHeight)

每次它都会给你较低的值。

最后要获得随机颜色，你可以像这样生成：

backgroundColor: "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"

检查下面的代码段。

＆＃13;

$('#test').click(function() {
  
    var docHeight = $(document).height(),
        docWidth = $(document).width(),
        $div = $('#test'),
        divWidth = $div.width(),
        divHeight = $div.height(),
        heightMax = docHeight - divHeight,
        widthMax = docWidth - divWidth;
  
    $div.css({
        left: Math.floor( Math.random() * widthMax ),
        top: Math.floor( Math.random() * heightMax ),
        width: Math.floor(getRandomArbitrary(0.7, 1) * divWidth ),
        height: Math.floor(getRandomArbitrary(0.7, 1) * divHeight ),
        backgroundColor: "rgb(" + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"
    });
  
});

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

＆＃13;

#test {
    position: absolute;
    width: 100px;
    height: 70px;
    background-color: #d2fcd9;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="test">test div</div>

＆＃13;

我添加了函数getRandomArbitrary以从指定范围获取随机数，在这种情况下从0.7到1.这应该需要更多点击才能获得框消失。

您可以详细了解here。

将随机大小，颜色和位置设置为形状

1 个答案: