onClick 事件无法执行功能
我的程序中有一个图像，我希望用户每次点击都能旋转 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 度，但单击图像不会产生明显的变化。
哔哔one2回答
-
青春有我
您没有使用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
相关分类
JavaScript