在 JavaScript 中，实现鼠标点击使箭头旋转 180 度是一个有趣且实用的功能。通过巧妙地运用 JavaScript 的事件处理和 DOM 操作，我们可以轻松达成这一效果。

我们需要在 HTML 中创建一个箭头元素。可以使用<div>或者<img>等标签来表示箭头。例如，我们使用一个<div>元素，并通过 CSS 为其设置箭头的样式。

<div id="arrow"></div>

在 CSS 中，我们定义箭头的样式：

#arrow {
  width: 50px;
  height: 50px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 20px solid black;
}

接下来，在 JavaScript 中，我们需要为箭头元素添加鼠标点击事件监听器。当鼠标点击时，改变箭头的旋转角度。

document.getElementById('arrow').addEventListener('click', function() {
  let currentRotation = parseInt(this.style.transform.replace('rotate(', '').replace('deg)', '')) || 0;
  this.style.transform = 'rotate(' + (currentRotation + 180) + 'deg)';
});

在上述代码中，我们首先获取当前元素的旋转角度，如果没有设置过旋转角度，则默认为 0 度。然后，将旋转角度增加 180 度，并重新设置元素的transform样式，实现箭头的旋转。

通过这样的方式，每次点击箭头时，它都会旋转 180 度。这种效果可以应用于多种场景，比如菜单的展开与收起、切换状态的显示等。

在实际开发中，还可以根据具体需求对代码进行进一步的优化和扩展。例如，添加动画效果，使旋转更加平滑；或者根据不同的条件来决定是否允许旋转等。

利用 JavaScript 实现鼠标点击使箭头旋转 180 度的功能，不仅能够增强用户交互体验，还为网页增添了一份动态和趣味。希望您能通过上述示例，顺利地在自己的项目中实现这一有趣的功能。