我的程序中有一个图像，我希望用户每次点击都能旋转 90 度。因为图像会自动以倾斜角度放置在我的程序中，所以在允许用户旋转之前，我需要使用 CSS 来旋转图像。这样，当它被点击时，图像将水平和侧面出现。目前，我的 HTML 代码中的 onClick 事件似乎只工作一次。我试图声明一个变量来增加每次点击的旋转值，但这样做完全消除了旋转<html> <head> <script> 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> <img id="c-channel" src="https://cdn.glitch.com/2a39b17c-6b95-46ec9d5c-cf9db18cd879%2Foutput-onlinepngtools%20(6).png?v=1564485433523" onclick="rotateImage()"> </body></html>我希望该程序允许用户在每次单击时将图像再旋转 90 度，但单击图像不会产生明显的变化。
2 回答
青春有我
TA贡献1784条经验 获得超8个赞
您没有使用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()">
添加回答
举报
0/150
提交
取消