如何在加载网页时将图像旋转到随机度数？ (JavaScript)

Question

我正在尝试创建一个小项目，让用户猜测图像的旋转度数，然后给出一个段落，告诉用户图像旋转了多少度以及它们偏离了多少度。我尝试在第 2 行使用 Math.random() 将图像的旋转设置为 0 到 359 之间的随机值，然后在任何函数之外的图像上使用变换样式。我希望通过在函数外部设置旋转，它会在页面加载后立即发生，但这是行不通的（我是编码新手）。我怎样才能解决这个问题？这是我的 JS 代码：

let image = document.getElementById(`image`)
let rotation = Math.floor(Math.random() * 359)
let degrees = document.getElementById(`degrees`)
let submitButton = document.getElementById(`submitButton`)
let difference
let rotationParagraph = document.getElementById(`rotationParagraph`)

image.style.transform = `rotate(${rotation.value}deg)`

submitButton.addEventListener(`click`, guessRotation)

function guessRotation() {
  difference = `Math.abs(${rotation.value} - ${degrees.value})`
  rotationParagraph.innerHTML = `Rotation is ${rotation.value}. You were off by ${difference.value}.`
}

HTML代码：

<!DOCTYPE html>
<html>

<head>
  <title>Guess the Rotation</title>
  <link href="style.css" rel="stylesheet">
  <script src="script.js" defer>

  </script>
</head>

<body>
  <h1>Guess the Rotation</h1>

  <!-- image that will be rotated -->
  <div id="object">
    <image src="connection.jpg" width="200" style="transform: rotate" id="image">
  </div>

  <!-- side panel -->
  <div id="sidePanel">
    <p id="">How many degrees is the image rotated?</p>
    <input type="number" min="0" max="359" placeholder="0-359" id="degrees">
    <button id="submitButton">Submit</button>
    <p id="rotationParagraph"></p>
  </div>
</body>

</html>

CSS代码：

#object, 
#sidePanel {
  /* puts the image and side panel side by side */
  display: inline-block;

  /* makes the image and side panel aligned at the top */
  vertical-align: top;
}

#image {
  /* gives dimensions and a border to the image */
  border: 1px solid black;

  /* puts empty space to the right of the box to separate it from the side panel */
  margin-right: 30px;
  margin-bottom: 30px;
  margin-top: 30px;
}

我尝试在第 2 行使用 Math.random 将图像的旋转设置为 0 到 359 之间的随机值，然后在任何函数之外的图像上使用变换样式。

我尝试使用“rand(0, 359)deg”作为旋转量在 CSS 中添加旋转，但没有任何变化。

Answer 1

你的问题在这里：

image.style.transform = `rotate(${rotation.value}deg)`

也许.value打错了，但需要删除：

image.style.transform = `rotate(${rotation}deg)`;

我制作了一个有效的代码片段，使用一些额外的样式使图像容器拉长并着色，以便您可以看到旋转。如您所愿，每次重新加载的角度都不同。

let image = document.getElementById(`image`)
//let rotation = 90;
let rotation = Math.floor(Math.random() * 359)
let degrees = document.getElementById(`degrees`)
let submitButton = document.getElementById(`submitButton`)
let difference
let rotationParagraph = document.getElementById(`rotationParagraph`)

image.style.transform = `rotate(${rotation}deg)`;

submitButton.addEventListener(`click`, guessRotation)

function guessRotation() {
  difference = `Math.abs(${rotation.value} - ${degrees.value})`
  rotationParagraph.innerHTML = `Rotation is ${rotation.value}. You were off by ${difference.value}.`
}

#object, 
#sidePanel {
  /* puts the image and side panel side by side */
  display: inline-block;

  /* makes the image and side panel aligned at the top */
  vertical-align: top;
}

#image {
  /* gives dimensions and a border to the image */
  border: 1px solid black;
  aspect-ratio: 0.5;
  background: yellow;

  /* puts empty space to the right of the box to separate it from the side panel */
  margin-right: 30px;
  margin-bottom: 30px;
  margin-top: 30px;
}

<h1>Guess the Rotation</h1>

  <!-- image that will be rotated -->
  <div id="object">
    <image src="connection.jpg" width="50"  id="image">
  </div>

  <!-- side panel -->
  <div id="sidePanel">
    <p id="">How many degrees is the image rotated?</p>
    <input type="number" min="0" max="359" placeholder="0-359" id="degrees">
    <button id="submitButton">Submit</button>
    <p id="rotationParagraph"></p>
  </div>

如何在加载网页时将图像旋转到随机度数？ (JavaScript)

How to have an image rotated to a random degree when webpage is loaded? (JavaScript)

javascript

random

image-rotation