Question

我创建了一个在屏幕上绘制正方形的HTML页面：

<!DOCTYPE html>
<html lang="en" xmlns:z-index="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> <!-- For draggable -->

    <script src="exercise.js"></script>
    <script>
        "use strict";

    $(document).ready(function() {
        var numberOfSquares = 5;

        for (var i = 0; i < numberOfSquares; i++)
        {
            var newWidth = getRandomSize();
            var newHeight = getRandomSize();
            var newColor = getRandomColor();
            var newPosition = getRandomPosition(newWidth, newHeight);

            var newSquare = $('<div class="square"><div/>').css({
                'position': 'fixed',
                'top': newPosition[1],
                'left': newPosition[0],
                'width': newWidth,
                'height': newHeight,
                'background-color': newColor
            });

            newSquare.appendTo($("body"));
        }
    });

    </script>
</head>
<body>

</body>
</html>

.js文件仅包含：

function getRandomSize()
{
    var size = Math.floor((Math.random() * 100) + 1) + 100;
    return size;
}

function getRandomColor()
{
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ )
    {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

function getRandomPosition(objectWidth, objectHeight)
{
    var x = window.innerWidth - objectWidth;
    var y = window.innerHeight - objectHeight;
    var randomX = Math.floor(Math.random() * x);
    var randomY = Math.floor(Math.random() * y);
    return [randomX, randomY];
}

问题在于，在创建页面后，在随机位置点击时，其中一个方块的颜色正在变化，没有明显的原因。有什么想法吗？

Div元素的颜色没有任何理由变化

0 个答案: