onClick 事件无法执行功能

我的程序中有一个图像，我希望用户每次点击都能旋转 90 度。因为图像会自动以倾斜角度放置在我的程序中，所以在允许用户旋转之前，我需要使用 CSS 来旋转图像。这样，当它被点击时，图像将水平和侧面出现。目前，我的 HTML 代码中的 onClick 事件似乎只工作一次。

我试图声明一个变量来增加每次点击的旋转值，但这样做完全消除了旋转

<html>

<head>

var degrees = 57;

function rotateImage() {

var img = document.getElementById('c-channel');

degrees += 90;

img.style.transform = 'rotate(degrees)';

}

</script>

<style>

#c-channel{

position: absolute;

cursor:move;

width:190px;

height:150px;

transform:rotate(57deg);

}

</style>

</head>

<body>

</body>

</html>

我希望该程序允许用户在每次单击时将图像再旋转 90 度，但单击图像不会产生明显的变化。

哔哔one

浏览 160回答 2

2回答

青春有我

您没有使用degrees变量，您可以使用字符串模板，如下所示：var degrees = 57;function rotateImage() {  var img = document.getElementById('c-channel');  degrees = (degrees % 360) + 90;  //img.style.transform = 'rotate(' + degrees + 'deg)';  img.style.transform = `rotate(${degrees}deg)`;}#c-channel {  position: absolute;  cursor: move;  width: 190px;  height: 150px;  transform: rotate(57deg);  border: grey;}<img id="c-channel" onclick="rotateImage()">

随时随地看视频慕课网APP