JS实现鼠标点击箭头旋转180度功能

发表于JS技术学习版块教程

在JavaScript中实现鼠标点击后使得一个箭头元素旋转180度的功能，可以通过改变该元素的CSS样式来完成。以下是一个简单的HTML和JavaScript代码示例，展示了如何使用click事件监听

在JavaScript中实现鼠标点击后使得一个箭头元素旋转180度的功能，可以通过改变该元素的CSS样式来完成。以下是一个简单的HTML和JavaScript代码示例，展示了如何使用click事件监听器和transform属性来实现这个功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Arrow Rotation Example</title>
    <style>
        #arrow {
            /* 初始旋转角度为0 */
            transform: rotate(0deg);
            /* 保证元素是块级元素，可以应用样式 */
            display: inline-block;
            /* 其他样式... */
        }
    </style>
</head>
<body>

    <!-- 箭头元素 -->
    <div id="arrow" class="arrow-icon"></div>

    <script>
        // 获取箭头元素
        var arrowElement = document.getElementById('arrow');

        // 检查是否已经旋转过
        var isRotated = false;

        // 定义旋转函数
        function rotateArrow() {
            if (isRotated) {
                // 如果已经旋转过，则恢复到0度
                arrowElement.style.transform = 'rotate(0deg)';
            } else {
                // 否则旋转180度
                arrowElement.style.transform = 'rotate(180deg)';
            }
            // 切换旋转状态
            isRotated = !isRotated;
        }

        // 为箭头元素添加点击事件监听器
        arrowElement.addEventListener('click', rotateArrow);
    </script>

</body>
</html>

在这个例子中，我们首先定义了一个箭头元素，并为其添加了一个id属性，以便在JavaScript中引用。在CSS中，我们设置了transform属性的初始值为rotate(0deg)，这表示元素初始时不旋转。

JavaScript部分首先获取了箭头元素的引用，并定义了一个isRotated变量来跟踪元素是否已经旋转过。rotateArrow函数会检查这个状态，并相应地改变transform属性的值。如果isRotated为false（即元素尚未旋转），则将transform属性设置为rotate(180deg)，使元素旋转180度；如果isRotated为true（即元素已经旋转过），则将transform属性重置为rotate(0deg)，使元素恢复到原始状态。

最后，我们为箭头元素添加了一个click事件监听器，当用户点击箭头时，rotateArrow函数会被调用，从而实现旋转功能。

文章说明:

本文原创发布于探乎站长论坛，未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

该文观点仅代表作者本人，探乎站长论坛平台仅提供信息存储空间服务。