如何使图片显示在onclick的随机位置上

Question

我对JavaScript非常陌生，我所要做的就是单击按钮时，它将使图像出现在随机位置。

我尝试过的

 function show_image(src, width, height, alt) {
  var img = document.createElement("img");
  img.src = src;
  img.width = width;
  img.height = height;
  img.alt = alt;


  document.body.appendChild("imglink"); 
}

但这甚至没有构成新的元素。

有人可以告诉我正确的密码吗？

Answer 1

您在appendChild中有一个小错误，您应该改为附加创建的元素。 除此之外，只需将顶部和左侧设置为随机值，即可开始使用

 function show_image(src, width, height, alt) { var img = document.createElement("img"); img.src = src; img.width = width; img.height = height; img.alt = alt; // set the position img.style.position = 'absolute'; img.style.top = document.body.clientHeight * Math.random() + 'px'; img.style.left = document.body.clientWidth * Math.random() + 'px'; document.body.appendChild(img); } document.getElementById('foo').addEventListener('click', () => show_image("http://placekitten.com/200/300", 200, 300, 'foo') );

 html, body { height: 100vh; width: 100vh; }

 <button id="foo"> Get a cat </button>

Answer 2

您已有的代码有问题。 appendChild方法采用HTMLElement而不是String 。

但是，要在click上执行功能，您必须向要单击的元素添加一个事件侦听器。 创建/添加事件侦听器的方法称为addEventListener 。 它把事件的名称当作一个字符串（在这种情况下为'click' ），一个要执行的function和（可选）一个布尔值。

<HTMLElement>.addEventListener('click', <Function>);

例如，要将click侦听器添加到<body>元素，请编写：

document.body.addEventListener('click', function () { /* do something */ });

现在用于创建<img> ：

就像您已经做过的一样， createElement函数通常用于创建HTMLElement实例。 它采用您要创建的元素的标记名，并返回一个新的HTMLElement 。 要向该元素添加属性，通常可以通过为属性分配值来实现。 请记住，您必须输入null才能删除属性。

这将创建一个新的<img>元素并为其分配属性。

var myImg = document.createElement('img');
myImg.alt = 'A picture of Bill Murray';
myImg.src = 'https://www.fillmurray.com/400/300';
myImg.width = 400;
myImg.height = 300;

要将图像添加到DOM，请使用appendChild 。 要将其放入<body>元素中：

document.body.appendChild(myImg);

这会将<img>添加到<body>子代的末尾。

尽管您现在知道如何将新元素放置到DOM中，但是不会将其放置在任意位置 。 为此，您需要Math.random和innerWidth / innerHeight的组合。 或者，使用getBoundingClientRect 。

function getRandomCoordsIn (element) {
  var rect = element.getBoundingClientRect();
  // rect has 4 numeric properties: top, left, width, height
  // we return a pair of values which always is inside the element passed
  return [
    rect.top + Math.random() * rect.height, // top
    rect.left + Math.random() * rect.width  // left
  ];
}

让我们看看我们可以做什么：

document.body.addEventListener('click', handleClick);

function handleClick () {
  var coords = getRandomCoordsIn(document.body);

  var myImg = document.createElement('img');
  myImg.alt = 'A picture of Bill Murray';
  myImg.src = 'https://www.fillmurray.com/400/300';
  myImg.width = 400;
  myImg.height = 300;

  // This assigns inline CSS styles
  myImg.style.top = coords[0] + 'px';
  myImg.style.left = coords[1] + 'px';

  document.body.appendChild(myImg);
}

function getRandomCoordsIn (element) {
  var rect = element.getBoundingClientRect();
  // rect has some numeric properties, we need: top, left, width, height
  // we return a pair of coordinates which is located inside
  // the element passed
  return [
    rect.top + Math.random() * rect.height, // top
    rect.left + Math.random() * rect.width  // left
  ];
}

您还需要一些样式：

html { height: 100vh; overflow: auto; }
body { min-height: 100%; }
img { position: absolute; display: block; }

如何使图片显示在onclick的随机位置上

问题描述

2 个解决方案

解决方案1
1 已采纳 2019-04-13 18:53:22

解决方案2
1 2019-04-13 19:24:21

如何使图片显示在onclick的随机位置上

问题描述

2 个解决方案

解决方案1 1 已采纳 2019-04-13 18:53:22

解决方案2 1 2019-04-13 19:24:21

解决方案1
1 已采纳 2019-04-13 18:53:22

解决方案2
1 2019-04-13 19:24:21