我想单击一个按钮,随机图像出现在我的Container中的随机位置

时间:2018-03-08 23:51:07

标签: javascript html css random

每次点击底部时,我希望能够在随机位置显示随机图像"尝试"按钮。  我已经能够让它随机化图像,但我很难将随机位置也应用于随机化的图像。

<input id="input" type="text" placeholder="Enter a background colour...">

<button>enter</button>

<div id="container">
    <img id="picture" src="img/img1.jpg">
</div>

<button onclick="randAll();" id = "randomButton">Try!</button>


<script>
    var bColour = document.getElementById("container");
    var button = document.querySelector("button");
    button.addEventListener("click", clickHandler, false);
    button.style.cursor = "pointer";

    function clickHandler()
    {
        var input = document.querySelector("#input");
        bColour.style.backgroundColor = input.value;
    }

    var pix = new Array("img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg");

    function choosePic() {
        var randomNum = Math.floor(Math.random() * pix.length);
        document.getElementById("picture").src = pix[randomNum]

    }

    function randPos() {
        Math.floor(Math.random() * 700);


    }


</script>

1 个答案:

答案 0 :(得分:0)

像这样应用一些CSS:

function randPos() {
  var x = Math.floor(Math.random() * 700);
  document.getElementById("picture").style.left = x + 'px';
}

然后:

$_FILES['ProductImage']

根据需要调整我选择的特定宽度和高度。